Lightbox Info Board : SQLの窓


<script type="text/javascript">
ggmap_apikey = "Googleから取得したキー";
</script>
<script
	type="text/javascript"
	src="http://lightbox.on.coocan.jp/createPano.js"
></script>

( Google APIキー取得 )

その上で、以下のようにすると Google ストリートビューを埋め込む事ができます。


<script type="text/javascript">
createPanoArea(600,400,51.178834,-1.825924,318.75,9.35);
</script>

緯度、軽度の取得の仕方は以下を参照して下さい

パノラマパーツの使い方 :琴線に触れる

上記サンプルでは、ストリートビューに Google Map へのリンクがセットされていますが、
createPanoArea　の最後に 1 を付加すると追加されます


<script type="text/javascript">
createPanoArea(600,400,51.178834,-1.825924,318.75,9.35,1);
</script>

APIキーが必要無い使い方

同じライブラリを使用しますが、実際は winofsql.jp 内のページを IFRAME で埋め込むので
API キーは必要ありませんが、データを WEB 上に用意する必要があります。その方法としては、
二通りあり、一つは単純なテキストで、もう一つは Google ドキュメントです


<script
	type="text/javascript"
	src="http://lightbox.on.coocan.jp/createPano.js"
></script>


<script type="text/javascript">
createPanoSet(600,400,"http://winofsql.jp/ggtest.txt");
</script>

ggtest.txt は、サンプルのテキストファイルですが、以下のようになっています

UTF-8N です


34.6656,135.500316,307,-13,'大阪なんば新歌舞伎座'
34.693223,135.504423,317,-13,'中央公会堂'
34.651743,135.435843,120,-6,'赤レンガ倉庫'
34.682045,135.482379,307,-15,'基督教教会'
35.658069,139.745016,35,-45,"東京タワー"
48.857288,2.294404,8.24369085737899,-40,"エッフェル塔"
34.653041,135.506478,199.31607733026544,-25,"通天閣"
35.710883,139.796321,12,6.6,"雷門"
48.874165,2.294003,117.10451612337131,-5,"凱旋門"
41.891053,12.492318,187,-28,"コロッセオ"
52.34176,4.792075,162,-24,"風車"
34.652698,135.516336,31.58,-3.6,"四天王寺"
34.700711,135.190785,28.3,-7.54,"旧パナマ領事館"
43.710097,7.260234,247.99,-8.99,'ニース1'
43.703307,7.266342,272.33,-21.25,'ニース2'
40.412543,-3.708464,94.27,-4.73,'マドリード'

テキストファイルは単純ですが、自由な WEB スペースを持っている必要があります。
( ブログでファイルをアップロードできる場合もあります )

WEB スペースが無い場合は、Google ドキュメントが使用可能です。


<script type="text/javascript">
createPanoSet(600,400,"http://spreadsheets.google.com/pub?key=tAW-GdinBKZXr6GT1Va3xnQ&single=true&gid=0");
</script>

( 上記 Google ドキュメントへのリンク )

4番目の引数にはオプションが指定できます。

Data のリンクを表示しません
1) "datalink=0"

３番目のデータのみ表示します
2) "i=2"

1) と 2) の組み合わせです
3) "datalink=0&i=0"

Google Map へのリンクを付加します
4) "maplink=1"


<script type="text/javascript">
createPanoSet(
	600,
	400,
	"http://spreadsheets.google.com/pub?key=tAW-GdinBKZXr6GT1Va3xnQ&single=true&gid=0",
	"datalink=0&i=0&maplink=1"
);
</script>