WordPressにGoogle Maps API V3！

ストリートビュー（streetview）と地図（マップ）を同時に表示させるマップコネクトのストリートビューサンプルですが、ストリートビューをクリックして進んでいくと地図からペグマンがアウトしてししまいます。そこで、ストリートビューを動かしても常にペグマンが地図の中心座標にいるようにposition_changedイベントのソースを加えます。

（WordPress内でのストリートビューマップコネクト動作はコチラ）

◆ setStreetView

標準のストリートビューではソースの最後に、StreetViewPanorama クラスのsetVisible(true);を指定してやりますが、今回は地図とバインドさせますので、マップクラスのsetStreetView（）メソッドを使います。これで、StreetViewPanorama クラスと地図とを結びつける（バインド）することが出来ます。

panorama = new  google.maps.StreetViewPanorama(document.getElementById("panowide"),panoramaOptions);
map.setStreetView(panorama);

◆ position_changedイベント、getPosition()、そしてpanTo（）メソッドを組み合わせる

それでは、本題のposition_changedイベントによりイベントリスナーで、getPosition()からペグマンの位置を指定している座標変数のpositionCellを得ることにします。 position_changedイベントは、マーカークラス、インフォウィンドウクラス、そして今回のストリートビューパノラマクラスで使えるのイベントです（さらにAdUnit class、つまりグーグルアドセンス広告でも使えます。別途紹介） ）。 まあ、マーカークラス、インフォウィンドウクラスでは通常我々が地図に表示させるアイコンは、座標を指定して表示させたい座標が固定されていますので（例えば紹介したいお店の場所を動かすことはありませんね）、あまり使用しないイベントかもしれませんが、iPhone（アイフォン）で現在地座標を示す自動車や人のアイコン（マーカー）の座標（ポジション）が変更しされたら、それをイベント発生として取り出すことができます。 今回は、streetViewPanorama(ストリートビューパノラマ)クラスですので、ストリートビューの画面が動くたびに、その場所の座標をgetPositionでとりだして、panTo()で地図をその位置に移動させます。これで、ストリートビューで見ている道路の座標が常に地図の中止にセットされます。その結果ペグマンは地図の中心に表示されることになります。ソースは次の通りです。 地図が動いたときに発生するidle、Bounds等のイベントと使い分ければ、面白そうかな。

	//◆ペグマン位置変更イベント
	google.maps.event.addListener(panorama, 'position_changed', function() 
	{
	positionCell = panorama.getPosition();
	map.panTo(positionCell);//◆ペグマン（ストリートビューで見ている道路）の座標へ地図を移動
	});

◆ ペグマンを探すカスタムボタン 時々ペグマンが行方不明になるので、直ぐにさがせるように、ペグマン（ストリートビューで見ている道路）の座標をさらにクリックイベントへも渡しておき、カスタムボタンの「ペグマンはココ」をくりっくするとそこの座標へ地図がスライドするようにもしておきます。

	google.maps.event.addDomListener(controlUI, 'click', function() 
	{
	map.panTo(positionCell);//◆ペグマン（ストリートビューで見ている道路）の座標へ地図を移動
	});

できあがったサンプルは下記より見てみてください。

◆ サンプル地図

• カーナビのようにposition_changedイベントでペグマンを常に地図の中心座標に配置する

◆Google Maps JavaScript API V3

• Google Maps API v3 目次に戻る

スポンサードリンク