[JS]Google Maps JavaScript API V3 で地図上にストリートビュー可能範囲(青い道路)を表示する方法

Google
Google Maps JavaScript API V3

Google Maps JavaScript API V3

Google Maps JavaScript API V2の時はGStreetviewOverlayで地図上にストリートビュー可能範囲(青い道路)を表示することができたのですが、V3になってからやり方が分からなかったので調べてわかったのでメモしておきます。
結構検索しても情報がなくて、困った…。

ImageMapTypeを地図にoverlayMapTypesすると出来るみたいでした。

<script charset="utf-8" type="text/javascript">// <![CDATA[
  function drawMapV3(){
    var initPos = new google.maps.LatLng(35.709383,139.810736);
    var myOptions = {
      zoom: 17,
      center: initPos,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      streetViewControl: true,
      mapTypeControl : true,
      mapTypeControlOptions : {
        style : google.maps.MapTypeControlStyle.DROPDOWN_MENU
      }
    };
    var map_canvas = new google.maps.Map(document.getElementById("gMapV3_Map"), myOptions);

    // maker
    var marker_options = {
      position: initPos,
      map: map_canvas,
      title: 'ここらへんらしいよ'
    };
    var marker = new google.maps.Marker(marker_options);

    var infowindow = new google.maps.InfoWindow({
        content: '<div class="infowindow">東京スカイツリーがみえるよ!(工事中だけど)</div>',
        size: new google.maps.Size(250, 100)
    });

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map_canvas, marker);
    });

    // streetview tiles
    var street = new google.maps.ImageMapType({
       getTileUrl: function(coord, zoom) {
          var X = coord.x % (1 << zoom);
          return "http://cbk0.google.com/cbk?output=overlay&zoom=" + zoom + "&x=" + X + "&y=" + coord.y + "&cb_client=api";
       },
       tileSize: new google.maps.Size(256, 256),
       isPng: true,
       opacity: 0.8
    });
    map_canvas.overlayMapTypes.push(street);

    // streetview
    var streetview_options = {
      position: initPos,
      pov: {
        heading: 0,
        pitch: 90,
        zoom: 1
      }
    };
    var panorama = new google.maps.StreetViewPanorama(document.getElementById("gMapV3_StreetView"), streetview_options);
    map_canvas.setStreetView(panorama);
  }
  google.maps.event.addDomListener(window, 'load', drawMapV3);
// ]]></script>

実際に動作するデモはこちら → DEMO

参考:

コメント

  1. kaburk より:

    ブログ更新: [JS]Google Map API V3 で地図上にストリートビュー可能範囲(青い道路)を表示する方法 – [ま]技術雑記 http://bit.ly/eDV9d4

  2. ブログ更新: [JS]Google Map API V3 で地図上にストリートビュー可能範囲(青い道路)を表示する方法 – [ま]技術雑記 http://bit.ly/eDV9d4

  3. [JS]Google Map API V3 で地図上にストリートビュー可能範囲(青い道路 …: Google Map API V2の時はGStreetviewOverlayでできたのですが、V3になってからやり方が分から… http://bit.ly/gjY0ub

  4. [JS]Google Map API V3 で地図上にストリートビュー可能範囲(青い道路 …: Google Map API V2の時はGStreetviewOverlayでできたのですが、V3になってからやり方が分から… http://bit.ly/gjY0ub

  5. [JS]Google Maps JavaScript API V3 で地図上にストリートビュー可能範囲(青い道路)を表示する方法 | [ま]技術雑記 http://t.co/BgsxChf8