I am using Google StreetView, and would like to allow placement of markers by the user.
For example, if it's just a Google Map (rather than the StreetView) I can do:
google.maps.event.addListener(map, 'click', recordPosition);
function recordPosition(e) {
var marker = new google.maps.Marker({
position : e.latLng,
map : map,
icon : cafeMarkerImage,
title : 'Centre of the universe ' + numberOfClicks
});
numberOfClicks++;
}
and when the user clicks, the cafeMarkerImage
is put under the mouse cursor.
Once these markers are added to the map, switching to StreetView shows them correctly... however, I'd like to add them in StreetView, not map view.
However, in StreetView, the 'click'
event is not available.
I want to find the latLng
of the center of the "pancake" that is shown in StreetView during mouse motion --- once the user clicks.
Odi's answer gets me some of the way there, but I'm still stuck: The click gets me the CURRENT position of the Street View POV, but then it changes immediately to where I clicked. So if I grab the POV on the click and do the annotation I need there, but user can no longer see it because the view changes.
You can use the StreetViewPanorama layer, which provides you with the appropriate events and data.
I guess what you want is the position_changed
event. See this good example of how to use the event and retrieve the according data.
In short:
var start = new google.maps.LatLng(47.500613, 8.724575);
var panoramaOptions = {
position: start,
pov: {
heading: 20,
pitch: 0,
zoom: 1
},
visible: true
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"), panoramaOptions);
google.maps.event.addListener(panorama, 'position_changed', function() {
console.log(panorama.getPosition().toString());
});