自動散策 by ストリートビュー
ストリートビューで自動散策するプログラム、AutoWalk by Street Viewを作成した。
自分のWEBサイトへの掲載方法
次のようなHTMLを作成することで、自分のWEBサイトに自動散策プログラムを埋め込むことができる。初期地点は自由に設定できるので、自分の街を自動散策するようなプログラムを埋め込むこともできる。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>AutoWalkのサンプル</title> <script src="http://maps.google.com/maps?file=api&v=2&key=(取得したキー)" type="text/javascript"></script> <script src="http://www.kappuccino.jp/autowalk.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ // 初期位置 var initialPosition = new GLatLng(35.003277, 135.774991); // 初期視線方向 var initialPov = {yaw:0, pitch:0, zoom:0} // Googleマップの初期ズームレベル var initialZoomLevel = 18; //]]> </script> </head> <body onload="load()" onunload="GUnload()"> <div id="autowalk-street" style="width: 800px; height: 300px;"></div> <div id="autowalk-map" style="width: 800px; height: 200px;"></div> </body> </html>
Google Maps APIの読み込み
<script src="http://maps.google.com/maps?file=api&v=2&key=(取得したキー)" type="text/javascript"></script>
(取得したキー)の部分を取得したGoogle Maps APIのキーに置き換える必要がある。
AutoWalk by Street Viewの読み込み
<script src="http://www.kappuccino.jp/autowalk.js" type="text/javascript"></script>
初期位置の設定
GLatLngの引数は、緯度、経度の順。
// 初期位置 var initialPosition = new GLatLng(35.003277, 135.774991);
初期視線方向の設定（省略可）
視線方向のパラメータは次の通り。
| プロパティ | 型 | 解説 |
|---|---|---|
| yaw | Number | 水平方向の角度。0〜360度で設定。0が北、90が東、180が南、270が西。 |
| pitch | Number | 上下方向の角度。-90〜90度で設定。-90が真上、0が水平、90が真下。 |
| zoom | Number | ズーム。0以上の値を設定。0は最も引いた状態。 |
// 初期視線方向 var initialPov = {yaw:0, pitch:0, zoom:0}
Googleマップの初期ズームレベルの設定（省略可）
大きいほど地図が拡大した状態で始まる。あまり大きくしすぎると、地域によっては表示されない。
// Googleマップの初期ズームレベル var initialZoomLevel = 18;
プログラムの実行
↓のonload属性でプログラムを呼び出す。
<body onload="load()" onunload="GUnload()">
ストリートビューの表示
id="autowalk-street"を指定されたHTML要素にストリートビューを表示。styleの部分は任意。CSSファイルで指定することも可能。
<div id="autowalk-street" style="width: 800px; height: 300px;"></div>
ストリートビューの表示（省略可）
id="autowalk-map"を指定されたHTML要素にGoogleマップを表示。省略してストリートビューのみを表示することもできる。
<div id="autowalk-map" style="width: 800px; height: 200px;"></div>
免責事項
AutoWalk by Street Viewの利用に関連した一切の損失に関して、作成者Kappuccinoは責任を持ちません。そのことに同意の上でご利用下さい。
