ストリートビューが利用できる範囲を表示する

説明

Google Maps API v2のときに利用できたGStreetviewOverlayは、Google Maps API v3では用意されていません。そこでImageMapTypeを使って自作します。

ImageMapTypeクラス

ImageMapTypeは画像タイルのURLを取得する関数を定義するだけで、簡単にマップタイプを自作できるクラスです。次のように使います。

var imgMapTypeOptions = {
  getTileUrl : function(point, zoom) {
    var tileUrl = "./tiles.php?x=" + point.x + "&y=" + point.y + "&zoom=" + zoom;
    return tileUrl;                          //画像のURLを返す
  },
  tileSize: new google.maps.Size(256, 256),  //必ず正方形。通常256px
  alt: "",                                   //画像がないときに表示する文字
  maxZoom: 19,                               //マップタイプの最大値
  minZoom: 10,                               //マップタイプの最小値
  name: "MyMapType",                         //マップタイプ名
  opacity: 0.5                               //透明度(0.0〜1.0)
};
var myMapType = new google.maps.ImageMapType(imgMapTypeOptions);

作成したマップタイプは、地図の切り替え表示で表示する地図タイプとしても登録できますが、


Map.overlayMapTypes.insertAt(0, myMapType);

とすることで、オーバーレイとして地図上に表示することができます。


insertAt(0, myMapType)

の第1引数「0」は、1番目に登録されているマップタイプ(通常、ROADMAP)です。

Code

<script type='text/javascript'>

    var mapCanvas;

    function intialize() {
      
      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)
      });
      
      
      //Create a map
      mapCanvas = new google.maps.Map(document.getElementById("map_canvas"));
      mapCanvas.overlayMapTypes.insertAt(0, streetViewLayer);
      
      mapCanvas.setCenter(new google.maps.LatLng(35.676148, 139.74479));
      mapCanvas.setZoom(14);
      mapCanvas.setMapTypeId(google.maps.MapTypeId.ROADMAP);
      
    }
    
    google.maps.event.addDomListener(window, "load", intialize);
  </script>