[GoogleMaps] グーグルマップとストリートビューを双方向連動表示させる

by

久しぶりにGoogleマップ弄ったらいろいろと変わっていたので遊びついでに作ってみた。
Ajaxローダーを利用して導入しやすく作ってみたので是非お試しあれ！

このスクリプトは、Googleマップとストリートビューを同時に表示した上で、移動した時の表示を連動させるものです。

  • GooleMapsで中央に表示している地点がストリートビューに対応している場合、ストリートビューを表示
  • Googleマップでマーカーを移動したらストリートビューも移動させる
  • ストリートビューで移動したらマップのポイント（中心）も移動させる
  • ストリートビューで表示している場所の住所表示
  • ストリートビューに未対応の場合エラーを表示する
  • 3Dコントローラーの利用

GoogleMapsとStreetViewの双方向連動表示

DEMOはこちら

使用上の注意

  • 光のような高速回線環境でないと表示がもたつきます
  • ローカル環境（サーバーではない）ではクリック移動時のストリートビューが機能しません
  • ストリートビューを表示する要素は、直接縦横のサイズを指定しないと横幅が100%になります
  • MITライセンスです

導入方法

地図とストリートビューを表示させる要素を用意する。
ストリートビューの方はスタイル属性でサイズを指定しないと華麗にスルーされます。

<div id="gmap"></div>
<div id="gstreet" style="width: 640px;height:300px"></div>

スタイルシートで高さを指定。
ストリートビューのエラーはerrorというクラスが付与されているので、お好みにスタイリングしてください。

#gmap {
	height:400px;
}
#gstreet {
}
#gstreet .error {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	padding:50px 0;
	text-align:center;
}

gstreetmap.jsを開いて設定を適当に変更する。
座標を調べる場合は初期座標の検索ツールが便利です。

var gsvmConfig = {
	"pageName":"outline.html",//表示するページ
	"gmLat":35.334829325313876,  //GLat
	"gmLng":137.12127327919006, //GLng
	"gmDivID":"gmap",    //地図を表示する要素のID
	"gmScope":16,        //拡大率
	"markerAdd":true,  //マーカーの表示
	"SMap_Controler":false, //小さいコントローラ
	"LMap_Controler":true, //大きいコントローラ
	"SmallZoomControl":false,//ズームコントローラ
	"NavLabelControl":true,//ナビゲーションレベルコントローラ
	"Type3_Controler":false, //地図タイプ切り替え（３種）
	"Type2_Controler":false, //地図タイプ切り替え（2種）
	"Scale_Controler":true, //スケール
	"OV_Controler":true, //右下の縮小地図
	"WheelZoom":false, //ホイールでのズーム操作
	"DClickZoom":true, //ダブルクリックでのズーム操作
	"WindowHTML":"<em>Hellow</em><br />何かコメントを入れてください",//情報ウィンドウのHTML
	"gmsDivID":"gstreet",    //ストリートビューを表示する要素のID
	"zoom":0,            //ズーム レベル（0が最大）
	"pitch":0,            //カメラの初期デフォルト ピッチから「上」または「下」の角度の差
	"yaw":0,             //カメラの中心回りの回転角（真北からの相対的な角度）
	"FullScreen":true,  //フルスクリーンモード
	"userPhotos":true,//ユーザー投稿写真の表示
	"photoRepositories":[ 'panoramio', 'picasa']//ユーザー投稿写真のリポジトリ
}

※photoRepositoriesは今のところpanoramioとpicasaのみ対応らしいんだけど、
将来的にFlickerとかも来るかもしれないのでオプション化しといた。

headかbodyに下記を追加する。
上がAjaxローダーで下がスクリプトファイルの読み込みです。
AjaxローダーのAPIキーはMapとかFeedsとかSearchなどGoogle Ajax APIサービスで発行されるものなら何でもOK。

<script type="text/javascript" src="http://www.google.com/jsapi?key=ABCDEFG"></script>
<script type="text/javascript" src="gstreetmap.js"></script>

ローダーについて詳しくはGoogle AJAX API ローダーの利用方法を参照のこと。

Download:[ダウンロードが見つかりません]

※圧縮かけてないソースコードが欲しい方は直接ご連絡ください。

DEMOはこちら

使ってるもの

  • GLargeMapControl3D
    →3Dってつけると新しいコントローラになる。
  • GNavLabelControl
    →パンくずリンクぽいやつ
  • GStreetviewPanorama
    →パノラマストリートビュー
  • GStreetviewOverlay
    →ストリートビューのオーバーレイ
  • GClientGeocoder
    →ストリートビューの住所表示
  • GIcon
    →ストリートビュー用のアイコン作成

GStreetviewOverlayはマーカーとかより後にaddOverlayしないと表示されない。

バグとか

  • 初期中心点に表示されるマーカーのクリックイベントが機能しない
    地図とマーカーのイベントリスナーが衝突してたことによるa is undefined – main.js ( line:1325 )エラー

Change Log

  • 2010-01-05 ver1.1 修正
  • 2010-01-04 ver1.0 公開

コメントを残す

This site uses Akismet to reduce spam. Learn how your comment data is processed.