Google ストリートビューの視点とマーカーを同期する

Google Maps API v3では、ストリートビューと地図を別々に表示することができます。 地図はMapクラス、ストリートビューはで作成できます。 2つを連動するには、Map.setStreetView()メソッドでStreetViewPanoramaクラスのインスタンスを設定すると可能です。 または、MapOptions.streetViewプロパティでも設定できます。

それだけだと最初からストリートビューを表示しないので、MVCObject.bindTo()メソッドで地図の中心座標をストリートビューの 表示位置を連動するようにします。 (Mapクラスは、MVCObjectクラスを継承しているのでMVCObjectクラスのメソッドが利用できます。)

<script type='text/javascript'>

  var mapCanvas;
  function initialize(){
    //地図を作成する
    var mapOptions = {
      zoom : 18,
      mapTypeId : google.maps.MapTypeId.ROADMAP
    };
    var mapDiv = document.getElementById("map_canvas");
    mapCanvas = new google.maps.Map(mapDiv, mapOptions);
    
    //ストリートビューオブジェクトの作成
    var streetViewDiv = document.getElementById("streetview_canvas");
    var streetViewOptions = {
      position : new google.maps.LatLng(35.014975, 135.782479)
    };
    var streetView = new google.maps.StreetViewPanorama(streetViewDiv, streetViewOptions);
    
    //地図とストリートビューを連動する
    mapCanvas.setStreetView(streetView);
    
    //ストリートビューの位置を地図と連動する
    mapCanvas.bindTo("center", streetView, "position");
    
    //ストリートビューの青いレイヤーを表示する
    //(http://googlemaps.googlermania.com/google_maps_api_v3/ja/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>