先日発注を受けていたホームページでGoogleMapで地図を表示することになったのですが、クライアントの要望でストリートビューもあわせて載せてほしいとのコト。
以前に作っていたGoogle Maps API のマップスクリプトは地図上にマーカーと噴出しで情報を入れていただけだったので、どうやったらできるのか調べてみると、Google Maps JavaScript API が、いつの間にかバージョン3になってました（汗っ。
しかも
このページに記載されている Google Maps JavaScript API バージョン 3 は、正式な JavaScript API となりました。JavaScript API バージョン 2 は、Google の廃止ポリシーにより正式に廃止されました。アップデート、拡張された新しいバージョンに、コードを移行することをおすすめします。
だそうです。
いや～危なかった。今まで使ってたやつはいずれ使えなくなるってことなのね。
ということで、今回の依頼のストリートビューつきマップですが、その前に！バージョン3になって一番大きな違いは何かというと
注: このバージョンの Google Maps JavaScript API では API キーは不要です。
おおおおお！！！
これはものすごくありがたいことです。
今までサイトごとにAPIキーを取得しなくてはならなかったので、実は少々めんどくさかったのです。
でストリートビューつきマップですが、サンプルがありました。
————————–
<script src=”http://maps.googleapis.com/maps/api/js?sensor=false” type=”text/javascript”></script>
<script type=”text/javascript”>
function initialize() {
var fenway = new google.maps.LatLng(42.345573,-71.098326);
var mapOptions = {
center: fenway,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(
document.getElementById(“map_canvas”), mapOptions);
var panoramaOptions = {
position: fenway,
pov: {
heading: 34,
pitch: 10,
zoom: 1
}
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById(“pano”),panoramaOptions);
map.setStreetView(panorama);
}
</script>
</head>
<body onload=”initialize()”>
<div id=”map_canvas” style=”width: 400px; height: 300px”></div>
<div id=”pano” style=”position:absolute; left:410px; top: 8px; width: 400px; height: 300px;”></div>
————————–
これの緯度経度を変更してサイズ調整してやれば完成です。
ちなみに
pov: {
heading: 34,
pitch: 10,
zoom: 1
}
この赤字の部分は 0~360（°）で写真の方向を変えることができます。
0が北 90が東 180が南 270が西
以上
No related posts.