I'm working in a project where I need to show google map street view heading towards road.
I've set the heading: 0 for the panorama object. But for different location it shows the heading differently. for example in some cases it shows heading towards street, for some locations it shows heading towards home.
panorama = theMap.getStreetView();
panorama.setPosition(new google.maps.LatLng(<?php echo $lat; ?>, <?php echo $lng; ?>););
panorama.setPov({
heading: 0,
zoom:1,
pitch:0
});
If there any way can fix the heading towards street for all post codes?
Thanks
Finally I found a very easy solution..
For the street view there's two links to navigate, that point towards street. I just read those heading and set the street view POV towards that direction. Here's full code.
var panoramaOptions = {
position: langlongObj,
visible: true
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById("map_canvas"), panoramaOptions);
map.setStreetView(panorama);
google.maps.event.addListener(panorama, 'links_changed', function() {
var links = panorama.getLinks();
panorama.setPov({
heading: links[0].heading,
pitch: 0,
zoom: 1
});
});
Related
I am having trouble trying to disable panning on google street view panorama for my app. I've looked at the Street View's documentation and couldn't find any ways to do it. Is it even possible to do this? Thanks~
This is working as intended as panoramas are essentially long pan-able images.
I suggest using Street View Static API instead to get stills of the same photosphere.
For exampl, this fiddle can also be achieved through Street View Static.
Fiddle Street View code :
var fenway = {lat: 42.345573, lng: -71.098326};
var panorama = new google.maps.StreetViewPanorama(
document.getElementById('pano'), {
position: fenway,
pov: {
heading: 160,
pitch: 10
},
clickToGo : false,
panControl: false
});
Static StreetView query :
https://maps.googleapis.com/maps/api/streetview?size=800x600&location=42.345573,-71.098326&heading=160&pitch=10&YOUR_API_KEY
I'm experiencing an very annoying problem with Google Maps. When I embed Google Maps for my company it shows another unrelated company in a white pop-over when I hover the label on the map. When I click my company label (the red company name on the map) it switches the address inside the white box in the upper left to that company but does not move the map pointer.
At first, when my company name was slightly different the other company was a company in India with a name that was similar and was also a webdesign agency. In the meanwhile I had slightly changed the displayed company name in Google Places. Now the change has been adopted by Google Maps and the issue persists. Only this time it is showing another company, in the UK, also a webdesign agency, the name is not similar.
To further clarify my issue I have attached screenshots.
I hover over my company label, the white popover shows the unrelated company name. (Screenshot 1)
I click 'my company label' (Screenshot 1)
The view changes to that in screenshot 2.
Note that this issue only occurs when Google Maps is embedded and set to point to my company.
I have already reported this issue to Google two weeks ago but I didn't receive any response yet.
Screenshot 1 (The state when hovering my company label)
Screenshot 2 (The state when company label has been clicked)
I am aware of the fact that stackoverflow is no customer service for Google but I am wondering if anyone else has experienced this issue as well. In case the issue is just a bug and I just have to wait for a fix, I would like to know if anyone has a workaround for this as it is quite embarrassing that Google Maps shows another company when you hover my company. Especially because the other company is also in the business of webdesign.
What's happening: Your code asks google to search your company ... and something goes wrong.
If you only have 1 marker, obviously you (the programmer) search the location (1 time), and you put it in your code.
Then you will never see that Indian company anymore.
Here is a simple example of a map, a marker and an infoWindow.
Is this what you want? Can you take it from here?
Any feature that's missing?
EDIT: oh yes ... I used a 'click' on line 31. You can change 'click' by 'mouseover'; then the infowindow is shown when hovering.
<script src="https://maps.googleapis.com/maps/api/js?"></script>
<script type="text/javascript">
// making the map. Initialization
function initialize() {
// company location:
var companyLocation = {lat: 52.0400564, lng: 4.3483506};
// company logo:
var urlCompanyLogo = 'https://lh3.googleusercontent.com/-ON8pWapB8Ro/AAAAAAAAAAI/AAAAAAAAAGo/wiwqSbfDyxg/s60-p-rw-no/photo.jpg';
// content of the infowindow
var companyDetails = ' <img class="logo" src="' + urlCompanyLogo + '"> <h3>Kermit industries</h3> Retrieving any golf ball from the pond';
// the map
var map = new google.maps.Map(document.getElementById('map'), {
center: companyLocation,
mapTypeId: google.maps.MapTypeId.HYBRID,
zoom: 18
});
// the marker
var marker = new google.maps.Marker({
position: companyLocation,
map: map,
title: 'Kermit industries'
});
// the infowindow
var infowindow = new google.maps.InfoWindow({
content: companyDetails,
position: companyLocation,
map: null // first set it to null, only show it after a click on the marker
});
// when the user clicks on the marker, the infowindow will appear
marker.addListener('click', function() {
infowindow.setMap(map);
});
}
// this will lauch the initialization once the page is loaded
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style>
#map {
height: 500px;
}
.gm-style-iw .logo{
float: right;
}
</style>
<div id="map"></div>
I've disabled streetview controls like so:
var mapOptions = {
zoom: 16,
center: myCenter,
streetViewControl:false
};
var map = new google.maps.Map(
document.getElementById("map"),
mapOptions
);
Which takes the streetview control off of the map BUT if you click on a point of interest with a panoramic image / link to streetview then click that image you are again taken into streetview mode.
I want to keep my points of interest but I want to disable maps from going into streetview mode. Is this possible?
Solution
Using the answer below I added a few more items:
.gm-rev, .gm-sv-label{display:none;}
.gm-iw, .gm-sm, .gm-wsv{pointer-events:none;}
2 possible options(there may be more):
prevent the streetView from being visible:
google.maps.event.addListener(map.getStreetView(), 'visible_changed', function(){
if(this.getVisible()){this.setVisible(false)}
});
try to make the streetview-link in the infowindow un-clickable
.gm-sv-label{display:none;}
.gm-wsv{pointer-events:none;}
I would suggest to use both options together, because the 2nd option may fail in the future(the classNames may change)
I am using street view on my site with pancontrols and zoomControls in it. For now google provides us some defined positions like RIGHT_CENTER etc. I want my custom position using css, I have taken help from this link Google Maps API V3 custom controls position but it is not working may be because it is for Road map and I need for street view. The code which I have used for calling street view is
function initialize() {
var fenway = new google.maps.LatLng(42.345573, -71.098326);
var panoOptions = {
position: fenway,
pov: {
heading: 280.19,
pitch: -22.444,
zoom:0.2
},
addressControl: false,
panControlOptions: {
position: google.maps.ControlPosition.RIGHT_CENTER
},
panControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.RIGHT_CENTER
},
enableCloseButton: false
};
var panorama = new google.maps.StreetViewPanorama(
document.getElementById('map-canvas'), panoOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
Thanks in Advance.
Check Custom Street View examples and this CUSTOM STREET VIEW FIDDLE
AFAIK you must link your panorama to the image of the streetview, thats nice if you want to make your own street view, if you want to get a google one, you must get the URL to force the view enter in streetview.
function getCustomPanoramaTileUrl(pano, zoom, tileX, tileY) {
// Note: robust custom panorama methods would require tiled pano data.
// Here we're just using a single tile, set to the tile size and equal
// to the pano "world" size.
return 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQTaHe0F0J39SXbiRF43pz2wtyfD6kypCMrLxhWPkq9EACNgwO0iaMbJFM';
}
You have everything that you need to do this in the answer that you linked to above. You can pick from one of two choices:
The hack... This isn't recommended because if google maps decides to
change their layout, your code will break. To do this for
streetview, inspect the streetview window to find which 'gmnoprint'
you want to move. As an example, putting this after the panorama
load, moves the controls:
setTimeout( function() {
$($('div.gmnoprint')[4]).css({left: '-300px', background: 'red'});
}, 1000);
The best way to do it, as suggested at Google Maps API V3 custom controls position is to hide the streetview controls, create your own controls, and put them wherever you like. This takes much more effort, but it will not break when the streetview layout changes.
So, i have a problem. I had google maps street view on my site, there was a building panorama (inside), now API shows only street view near this building. Why and how can i fix it?
Here is my code:
function initialize() {
var fenway = new google.maps.LatLng(52.4980685,13.2951895);
var panoramaOptions = {
zoom: 1,
panControl:false,
zoomControl:false,
mapTypeControl:false,
scaleControl:false,
rotateControl:false,
streetViewControl:false,
overviewMapControl:false,
disableDefaultUI: false,
addressControl: false,
addressControlOptions: {
position: google.maps.ControlPosition.BOTTOM,
hide: true
},
position: fenway,
pov: {
heading: 0,
pitch: 0
}
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), panoramaOptions);
google.maps.setStreetView(panorama);
}
google.maps.event.addDomListener(window, 'load', initialize);
This may be a kind of bug(feel free to report it).
I guess you are talking about the place "Shebell Institut".
Let me explain why it's a bug:
Currently
the ID for this panorama is (at least for me):ag1bfIf47xUAAAGuxVUjCQ
and the location of the panorama(reported by the StreetViewService): (52.498042,13.29517199999998)
The location in your code differs a little bit, but when I use the exact location it should show the desired panorama(because it's the nearest)...but it doesn't.
Also when I query the panorama via StreetViewService.getPanoramaByLocation another panorama (with another location) will be returned, although the documentation says:
If the radius is less than 50 meters, the nearest panorama will be returned.
...but when I use the exact location it shouldn't return a panorama with another location.
I don't have a solution, because regarding to the documentation panorama-ID's are only stable within sessions.
But this must not mean that the panorama-ID must change often(I don't know what forces the change of a panorama-ID, but I can't imagine that the ID will be changed randomly).
So let's give it a try and use the panorama-ID(optionally).
set the panorama-location(fenway in this case) to
(52.498042,13.29517199999998)
request the panoramaData based on the ID (ag1bfIf47xUAAAGuxVUjCQ)
when both locations (fenway and the location of the returned panorama) are equal you may assume that it's still the ID of the desired panorama and use this panorama
new google.maps.StreetViewService()
.getPanoramaById('ag1bfIf47xUAAAGuxVUjCQ',
function(data,status){
if(google.maps.StreetViewStatus.OK===status
&&
data.location.latLng.toUrlValue()==fenway.toUrlValue()
){
panorama.setPano(data.location.pano);
}
});
Demo: http://jsfiddle.net/doktormolle/uwqvr5ee/
When it's sometimes not the desired panorama you may send a notification to the site-admin so that he may update the pano-ID.
I know it's not perfect, but it's the only approach I can think of so far(apart from a custom panorama)