Google Maps API・マイマップの使い方・活用法をご紹介しています。

マーカー(ピン・アイコン)を非表示(削除)にする |Google Maps API v3

GoogleMapsAPIにてマーカーを表示したら、
ユーザーの操作に応じてマーカーを消す必要がある場合もあります。
マーカーの削除処理で想定されるパターンをご紹介します。

 

マーカーを非表示にする |Google Maps API v3

まず、マーカーの配置と削除の処理の基本的な動作は以下でご紹介してます。

マーカーを削除する(基本)

「マーカーを表示する」「マーカーを削除する」をクリックすると、
唯一表示される1つのマーカーを表示、非表示にできます。

マーカーの表示・非表示の処理は基本的に以下の処理の応用です。

 

実際にはマーカーを1つのみ表示するという事はほとんどない事とは思います。
マップに対して現実的に利用するような処理をご紹介します。

以下は実際に表示している例です。

以下のボタンで動作を確認できます。

 

「マーカーを表示する」のボタンで15カ所のマーカーをすべて表示します。

マップ上ですべてのマーカーを削除する

「マーカーを全て削除」のボタンで表示されているマーカーをすべて非表示にします。

この処理については以下でご紹介しています。

マップ上で1つのマーカーを削除する

「姫路城のみ削除」のボタンで表示されているマーカーから、
「姫路城」を示すマーカーのみを非表示にします。
この処理については以下でご紹介しています。

マップ上で1つを残してマーカーを削除する

「姫路城のみ削除」のボタンで表示されているマーカーから、
「姫路城」を示すマーカー以外をすべて非表示にします。
この処理については以下でご紹介しています。

 

といっても実際のところ上記の3つのパターンは、
マーカーに対する処理はどれも同じものです。

ボタンから削除対象の「IDを渡さない/渡す(リスト)」の違いで、
削除の対象を制御しています。

今回は「ボタン」で実行していますが、
プルダウンリストや複数選択のリストなどからも同様にイベントを呼び出すことで、
同じように処理を実装することが可能です。

 


公開日:

コンテンツ
すべて展開 | すべて省略