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

Blog

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

[caption id="" align="alignleft" width="200"]Google Maps JavaScript API V3 Google Maps JavaScript API V3[/caption]

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

参考:


Comment on this article

<span class="topsy_trackback_comment"><span class="topsy_twitter_username"><span class="topsy_trackback_content">[JS]Google Maps JavaScript API V3 で地図上にストリートビュー可能範囲(青い道路)を表示する方法 | [ま]技術雑記 http://t.co/BgsxChf8</span></span>
<span class="topsy_trackback_comment"><span class="topsy_twitter_username"><span class="topsy_trackback_content">[JS]Google Map API V3 で地図上にストリートビュー可能範囲(青い道路 ...: Google Map API V2の時はGStreetviewOverlayでできたのですが、V3になってからやり方が分から... http://bit.ly/gjY0ub</span></span>
<span class="topsy_trackback_comment"><span class="topsy_twitter_username"><span class="topsy_trackback_content">[JS]Google Map API V3 で地図上にストリートビュー可能範囲(青い道路 ...: Google Map API V2の時はGStreetviewOverlayでできたのですが、V3になってからやり方が分から... http://bit.ly/gjY0ub</span></span>
<span class="topsy_trackback_comment"><span class="topsy_twitter_username"><span class="topsy_trackback_content">ブログ更新: [JS]Google Map API V3 で地図上にストリートビュー可能範囲(青い道路)を表示する方法 - [ま]技術雑記 http://bit.ly/eDV9d4</span></span>
<span class="topsy_trackback_comment"><span class="topsy_twitter_username"><span class="topsy_trackback_content">ブログ更新: [JS]Google Map API V3 で地図上にストリートビュー可能範囲(青い道路)を表示する方法 - [ま]技術雑記 http://bit.ly/eDV9d4</span></span>

Send comments

必須
必須  
※ メールアドレスは公開されません
任意
必須