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

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

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

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

マーカーを削除する（基本）

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

マーカーを全て表示する 姫路城のみ削除 姫路城以外を削除 マーカーを全て削除

当サイトにお越しいただきありがとうございます。
当サイトは管理人アルゴリズンが個人で作成を行っているものです。
Google Inc.様とは一切関係はありません。

当サイト内のコンテンツの引用・出典の明記なきものは、
すべて管理人アルゴリズンが著作権を保持するオリジナルコンテンツです。
当サイトでご紹介しております写真等がある場合にも著作権の放棄は致しません。

申し訳ございませんが、無断転載、複製をお断りさせて頂いております。
尚、サイト内コンテンツを引用される際にはご連絡は不要です。
ただし、出典元として当サイト(個別URL)へのリンクをお願いいたします。

コンテンツを有益であると感じていただけましたら非常に光栄です。
ありがとうございます。

記事の作成依頼・更新依頼・削除要請などのご意見ご要望は、
まず、Twitter等よりメンションまたは、メッセージでご連絡を頂けますと幸いです。
@algorhythnn｜Twitter
algorhythnn｜Google+
algorhythnn｜Facebook

運営者はSNS等で個人名等の公開は行わないポリシーで運営しております。
直接のご連絡・取材時などには個人名・屋号でご連絡を差し上げる場合もございますが、
個人名・屋号等をインターネット上で公開されることはご遠慮願います。