synchronize street view with map

Google Maps API v3 can create Map and StreetView objects in several. Creates a map object using Map class, and a street view object using StreetViewPanorama class. To synchronize with each other, sets the street view object to the map object using Map.setStreetView() method, or you can also set with MapOptions.streetView property.
It is not enough to synchronize, because it needs to share the position of view, for that you can use MVCObject.bindTo() method. (Since Map class extented MVCObject class, you can use methods of MVCObject class).

<script type='text/javascript'>

  var mapCanvas;
  function initialize(){
    //Create a map object
    var mapOptions = {
      zoom : 18,
      mapTypeId : google.maps.MapTypeId.ROADMAP
    };
    var mapDiv = document.getElementById("map_canvas");
    mapCanvas = new google.maps.Map(mapDiv, mapOptions);
    
    //Creates a street view panorama object.
    var streetViewDiv = document.getElementById("streetview_canvas");
    var streetViewOptions = {
      position : new google.maps.LatLng(42.345573,-71.098326)
    };
    var streetView = new google.maps.StreetViewPanorama(streetViewDiv, streetViewOptions);
    
    //Connects with map object.
    mapCanvas.setStreetView(streetView);
    
    //synchronizes map position with street view.
    mapCanvas.bindTo("center", streetView, "position");
    
    //Creates a street view layer.
    //(http://googlemaps.googlermania.com/google_maps_api_v3/en/map_example_streetview_layer.html)
    var streetViewLayer = new google.maps.ImageMapType({
      getTileUrl : function(coord, zoom) {
        return "http://www.google.com/cbk?output=overlay&zoom=" + zoom + "&x=" + coord.x + "&y=" + coord.y + "&cb_client=api";
      },
      tileSize: new google.maps.Size(256, 256)
    });
    mapCanvas.overlayMapTypes.insertAt(0, streetViewLayer);
  }
  google.maps.event.addDomListener(window, "load", initialize);
  </script>





Search
Books
Google Maps API Programming Guide

Four Google Maps API Experts wrote this book. Introducing useful examples for developers!
See more details