Google ストリートビューをAPI キーと 3行のJavaScript だけで埋め込む為のセット

  API キーの取得



まずは、Google のアカウントが必要ですが、Google ではいろいろなサービス提供してくれるので
持っていて絶対損はありません。

Google

Google APIキー取得

API キーの取得は、どこのサイトに貼り付けるかという id で、必ず必要です。
取得したら、以下のようにしてページの先頭のどこかに1度だけ貼り付けるようにします
( 別に何度貼り付けても支障は無いですが )

  
<script type="text/javascript">
ggmap_apikey = "ABQIAAAADuryzsZi1CenwhafsPEvzBTlxX6exlqfox7R3DL2rE86SPuTyhTaQ7BUC2tKBidUAEn1fGLxVVQR1A";
</script>
  



  Js ライブラリの利用



たいしたコードではありませんが、IE の対応にいろいろ苦労したテクニックが収められています。
ダウンロードしてご自分のサイトで使ってもいいですし、そのまま使っていただいても結構です。
( 但し、winofsql.jp にあるファイルは予告無く変更する可能性があります )

このコードは、ページの先頭に1度きりで、先ほどの API の指定より後に書いて下さい


ブラウザでダウンロード

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





  パノラマ情報の取得

通常、MAP の情報を所得するのは困難なので、Google MAP のページより直接取得します

IE 拡張メニューというものを登録して使用します。


ブラウザでダウンロード

Pano_01

Pano_02


IE 拡張メニューは、ダウンロードしてエクスプローラから実行するだけで
IE にインストールします。インストール後は一度 IE を終了すると使えるようになります。

アンインストールに関してはこちらを参照して下さい



右クリックから実行すると、メッセージボックスが表示されてクリップボードにコードが
コピーされますが、IE の設定によってはコピーできない場合もあります。
その場合、CTRL+C でメッセージボックスの内容をコピーして、メモ帳などに貼り付けてから
必要無い部分を省いて使用して下さい。


▼ 実装例


▼ ソースコード

ソース掲示板


1ページに1度しか表示しないのであれば以下ように一度に貼り付けて下さい

  
<script type="text/javascript">
ggmap_apikey = "ABQIAAAADuryzsZi1CenwhafsPEvzBTlxX6exlqfox7R3DL2rE86SPuTyhTaQ7BUC2tKBidUAEn1fGLxVVQR1A";
</script>
<script type="text/javascript" src="http://winofsql.jp/createPano.js"></script>

<script type="text/javascript">
createPanoArea(600,400,45.462145,9.191231,80.38,-19.2);
</script>
  










  infoboard   管理者用   
このエントリーをはてなブックマークに追加





フリーフォントWEBサービス
SQLの窓WEBサービス

SQLの窓フリーソフト

素材

一般WEBツールリンク

SQLの窓

フリーソフト

JSライブラリ