スポンサードリンク

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


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

◆ Google Maps API v3 / インフォウィンドウ(吹き出し)を地図の中心に表示させる。

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

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

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

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

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

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

つづく

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

◆Google Maps JavaScript API V3

スポンサードリンク

Related Posts

Leave a Comment


NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <img localsrc="" alt="">