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