WebTecNote

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

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

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

DEMOはこちら

使用上の注意

導入方法

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

<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はこちら

使ってるもの

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

バグとか

Change Log

モバイルバージョンを終了