WordPressにGoogle Maps API V3！

＜目次＞始めに地図を読み込んだ時、複数のマーカーから任意の一つのインフォウィンドウ（infowindow）を最初から表示する。

• （その1）外部XMLファイルでなく内部ソースにマーカー用の配列を記述する。
• （その2）マーカーのインフォウィンドウ（吹き出し）を地図の中心座標に表示させるpanTo（）メソッドを使ったサンプル
• （その3）イベントリスナー’dragstart’で、地図をドラッグしたらマーカーのインフォウィンドウ（吹き出し）を閉じて削除する。
• （その4）マーカー（アイコン）の配列についての検証(２次元配列を理解してみる)
• （その5）XMLファイル（配列）の複数マーカーから特定markerのインフォウィンドウ（infowindow）を最初から一つだけ表示するサンプルデモ完成

前回作成した地図でインフォウィンドウ（吹き出し）を地図の中心に表示させたのはいいのですが、他のマーカーが隠れてしまっています。

これを改善するために、ユーザーが地図を動かしたら、そのインフォウィンドウを消してしまいましょう。

これには、イベントリスナーのdragstart（地図のドラッグがスタート）を使います。似たサンプルで地図の移動が終了したらイベントを発生させるサンプルがあります。このサンプルはdragend(地図のドラッグがエンド)で、データベースからマーカーを都度も見込むのに使っています。参考にどうぞ。

コードは、下記の通りです。google.maps.event.addListenerに’dragstart’を指定します。

	google.maps.event.addListener(map, 'dragstart', function() //◆地図が動いたらインフォウィンドウをクローズする。
	{
	infoWindow.close();
	});

やっと配列をいじっていくサンプル地図が出来ました・・・・・・が、先に少しマーカーの配列について理解を深めておきたいと思います。

（つづく）

◆ Google Maps API v3　イベントリスナー’dragend’で、地図をドラッグしたらマーカーのインフォウィンドウ（吹き出し）を閉じて削除するサンプルデモ

• イベントリスナー’dragend’で、地図をドラッグしたらマーカーのインフォウィンドウ（吹き出し）を閉じて削除する。

◆Google Maps JavaScript API V3

• Google Maps API v3 目次に戻る

スポンサードリンク