2009年03月09日

Google ストリートビューのパノラマを自分のブログに設置する方法

東京タワーを見上げる状態でパノラマを設置しました。


<div name="pano" id="pano" style="width: 500px; height: 300px"></div>
<script
charset="utf-8"
src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=自分用のMAPキー"></script> <script type="text/javascript"> function handleNoFlash(errorCode) { if (errorCode == FLASH_UNAVAILABLE) { alert("Error: Flash doesn't appear to be supported by your browser"); return; } } var fenwayPark = new GLatLng(35.658069,139.745016); myPano = new GStreetviewPanorama(document.getElementById("pano")); myPOV = {yaw:35,pitch:-45}; myPano.setLocationAndPOV(fenwayPark, myPOV); GEvent.addListener(myPano, "error", handleNoFlash); if (window.attachEvent){ window.attachEvent('onunload', GUnload); } else { window.addEventListener('unload', GUnload, false); } </script>


Google のサンプル通りではいろいろ問題もあるので、 
ブログ内に確実に埋め込む方法です。
Google のサンプルでは、BODY の onload に初期処理がありますが、
埋め込む場所を先に定義する事によって、その必要がなくなります。

但し、メモリを開放する処理は必要なので、イベントに追加しています。
unload は、テストしました。うまく動いてます。
イベントに追加するには、他のライブラリを使用する方法もありますが、
他のライブラリが影響しないという保証は無いのでこのサンプルでは、
ベタで書いています。

で。

myPOV は、一つ目の引数は、東西南北で北を 0 とした値で、
二つ目の引数は、マイナスで上向きプラスで下向きのカメラ上下角度です。
( -90〜90 )

この値は、緯度経度共に、Google の「リンク」取得で知る事ができます。

GLatLng は、通常の MAP API における緯度・経度です。
GLatLng(lat, lng, unbounded?)
緯度と経度の順序に注意します。unbounded フラグが true である場合は、緯度と経度の数値がそのまま使用されます。true でない場合は、緯度は -90度 〜 +90度の範囲に、経度は -180度 〜 +180度の範囲に収まるように修正されます。
( 自分用の MAP キーはサイト毎でご自分で取得して下さい。 ) APIキー取得


posted by night wálker at 22:23| Google AJAX APIs−ストリートビュー
JavaScript ベーシック
SyntaxHighlighter
クロスブラウジング
その他
Highslide JS
思いの他綺麗に撮れた花
ブログを彩るには、JavaScript が必ず必要です。
特に、Google の存在は大きく、Google MAP をはじめとする
いろいろな先進の技術を簡単に利用できます。
結構知られていないものもあり、少し JavaScript を勉強すれば使えるようになって
自分のブログにいろいろな花を添える事ができるようになると思います。
※ この花は Highslide JS と言って Google とは関係ありません。



Admin