Displaying different streetview latlngs

157 views
Skip to first unread message

jmfolds

unread,
Feb 5, 2012, 5:58:13 PM2/5/12
to google-map...@googlegroups.com
Hello,

I have a list of latlngs that I want to display streetview for inside an infowindow when clicked.  I currently can get one location to display inside the infowindow for every marker, but I would like it to change location views based on which infowindow is selected.  If anyone can help out I would really appreciate it.  The link to what I have currently is http://jeremyfolds.com/uccs_apps/imap_garden.html

Thanks a lot!

Jeremy

Marc Ridey

unread,
Feb 5, 2012, 6:37:48 PM2/5/12
to google-map...@googlegroups.com
Does this helps:





--
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/-/tbLLJHGpcK4J.
To post to this group, send email to google-map...@googlegroups.com.
To unsubscribe from this group, send email to google-maps-js-a...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.

jmfolds

unread,
Feb 5, 2012, 10:05:43 PM2/5/12
to google-map...@googlegroups.com
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>

Marc Ridey

unread,
Feb 6, 2012, 12:38:20 AM2/6/12
to google-map...@googlegroups.com
You want something like this:

<script type="text/javascript"> 
  function initialize() {

    // Create the map 
    // No need to specify zoom and center as we fit the map further down.
    var map = new google.maps.Map(document.getElementById("map_canvas"), {
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      streetViewControl: false
    });
 
    // Create the shared infowindow with two DIV placeholders
    // One for a text string, the other for the StreetView panorama.
    var content = document.createElement("DIV");
    var title = document.createElement("DIV");
    content.appendChild(title);
    var streetview = document.createElement("DIV");
    streetview.style.width = "200px";
    streetview.style.height = "200px";
    content.appendChild(streetview);
    var infowindow = new google.maps.InfoWindow({
   content: content
    });

    // 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: 10, name: "marker 1" },
      { lat: -33.90, lng: 151.10, heading: 100, zoom: 3, pitch: -10, 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, data);
   });
    }

    // 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.
    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.bindTo("pov", pin);
      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, data) {
   title.innerHTML = marker.getTitle();
   pin.set("pov", {
      heading: data.heading || 0, 
      zoom: data.zoom || 0, 
      pitch: data.pitch || 0
   });
   pin.set("position", marker.getPosition());
   infowindow.open(map, marker);
    }
  }
</script> 

You delay setting the "pov" value of the panorama until it's created when we open the window, at the same location as setting the position.

Jeremy M Folds

unread,
Feb 6, 2012, 11:32:30 AM2/6/12
to google-map...@googlegroups.com
Awesome!

Thanks so much for the help!

-Jeremy
--
You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.
Reply all
Reply to author
Forward
0 new messages