Marc,
That is extremely helpful, thank you! I do have another question for you.
I am trying to set the markers so that each one when viewed has a
different pov. I tried this type of code and have not been successful.
Any pointers?
The code:
// Define the list of markers.
// This could be generated server-side with a script creating the array.
var markers = [
{ lat: -33.85, lng: 151.05, heading: 260, zoom: 0, pitch: 0, name:
"marker 1" },
{ lat: -33.90, lng: 151.10, heading: 260, zoom: 0, pitch: 0, name:
"marker 2" },
{ lat: -33.95, lng: 151.15, name: "marker 3" },
{ lat: -33.85, lng: 151.15, name: "marker 4" }
];
// Create the markers
for (index in markers) addMarker(markers[index]);
function addMarker(data) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data.lat, data.lng),
map: map,
title: data.name
});
google.maps.event.addListener(marker, "click", function() {
openInfoWindow(marker);
});
}
// Zoom and center the map to fit the markers
// This logic could be conbined with the marker creation.
// Just keeping it separate for code clarity.
var bounds = new google.maps.LatLngBounds();
for (index in markers) {
var data = markers[index];
bounds.extend(new google.maps.LatLng(data.lat, data.lng));
}
map.fitBounds(bounds);
// Handle the DOM ready event to create the StreetView panorama
// as it can only be created once the DIV inside the infowindow is
loaded in the DOM.
for (index in markers) {
var data = markers[index];
var panorama = null;
var pin = new google.maps.MVCObject();
google.maps.event.addListenerOnce(infowindow, "domready", function() {
panorama = new google.maps.StreetViewPanorama(streetview, {
navigationControl: false,
enableCloseButton: false,
addressControl: false,
linksControl: false,
visible: true
});
panorama.setPov({
heading: data.heading,
zoom: data.zoom,
pitch: data.pitch
});
panorama.bindTo("position", pin);
});
}
// Set the infowindow content and display it on marker click.
// Use a 'pin' MVCObject as the order of the domready and marker click
events is not garanteed.
function openInfoWindow(marker) {
title.innerHTML = marker.getTitle();
pin.set("position", marker.getPosition());
infowindow.open(map, marker);
}
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>
--
You received this message because you are subscribed to the Google Groups
"Google Maps JavaScript API v3" group.
To view this discussion on the web visit
https://groups.google.com/d/msg/google-maps-js-api-v3/-/fARe0j78LrcJ.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-maps-js-api-v3?hl=en.
