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

説明

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>

サイト内検索
Google Maps APIプログラミング入門 第2版
Google Maps APIプログラミング入門 第2版
全520ページ。Google Maps API version3を中心に公式ドキュメントより詳しく解説しています。
詳しくはこちら
Google Maps APIプログラミングガイド

Google Maps API Expert 4人が共著で執筆。中級者向けに実用に役立つサンプルを中心に紹介! スマートフォン時代に合わせたGoogle Maps APIの使い方も掲載。
詳しくはこちら