マーカーを削除する（基本） ｜Google Maps API v3
GoogleMapsAPIにてマーカーを表示したら、
ユーザーの操作に応じてマーカーを消す必要がある場合もあります。
ここでは「単純にマーカーを消す」例についてご紹介します。
他の複雑な削除処理も基本はこの処理になります。
概要
マーカーを削除する（基本） ｜Google Maps API v3
以下が実際の表示例です。
初期で１つのマーカーを表示し「マーカーを削除する」をクリックしたら、
表示されている唯一のマーカーを削除します。
以下のボタンで動作を確認できます。
マーカーを表示する
マーカーを削除する
補足説明
「マーカーを表示する」「マーカーを削除する」それぞれのボタンは、
単純に関数を呼び出す処理になっています。
|
1 2 |
<button class ="gmap_btn" id="drop" onclick="dropMaker();"/>マーカーを表示する</button> <button class ="gmap_btn" id="del" onclick="deleteMakers();"/>マーカーを削除する</button> |
マーカーの生成
マーカーを表示する処理は以下の通り、
new google.maps.Marker(options) にて単純にマーカーの生成をしています。
スコープ外のグローバル宣言している「marker」変数に対して、
生成したマーカーインスタンスを格納しています。
また「マーカーを表示する」を複数回クリックすると、
その都度同じ位置に同じマーカーが追加されていくことを回避するため、
実際にはマーカー生成時に都度「deleteMakers()」を呼び、
既存のマーカーを削除しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
var marker = null; （中略） //マーカーの生成と表示 function create_marker(options){ var m = new google.maps.Marker(options); return m; } //マーカーを落とす function dropMaker(){ //既にあるマーカーを一旦削除 deleteMakers(); //新たに生成 marker = create_marker({ map: gmap_canvas, position: new google.maps.LatLng(34.839450, 134.693903), }); } |
マーカーの削除
マーカーの削除は生成時に格納した「marker」変数に対して、
「marker.setMap(null)」を指定することで、マーカーの削除が行えます。
※「marker.setMap(null)」だけではマーカーに対する参照が残ってしまい、
メモリの開放が行われない為「marker = null」にて明示的にnullをセットしています。
|
1 2 3 4 5 6 7 |
//マーカーを削除する function deleteMakers() { if(marker != null){ marker.setMap(null); } marker = null; } |
基本的にはマーカーインスタンスを生成したら、
関数間でそれぞれアクセスするために、グローバル変数に格納しておき、
削除処理でもその変数を参照します。
※クラス化してグローバルを利用しない方が好みではあります。
サンプルコード
HTML
HTMLではGoogle Mapを表示するエリア(<div id=”gmap_canvas”></div>)を配置しています。
エリアを囲んでいる「<div class=”aspect”></div>」部分は、
ページ表示用の高さ制御用のタグです。
|
1 |
<div class="aspect"><div id="gmap_canvas" class="g_canvas"></div><span id="ver" style="font-size: 0.8em; color: gray;"></span></div> |
CSS
CSSではclass=”aspect”に対して、 幅100%を指定し、高さをビューポートの50%としています。 GoogleMapを表示するエリア(id=”gmap_canvas”)のサイズを、 class=”aspect”に対しての幅・高さを100%として指定しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<style type="text/css"> .aspect{ width:100%; height:50vw; } .aspect_normal, .aspect_dot, .aspect_key, .aspect_dotkey{ width:100%; height:25vw; } #gmap_canvas, #gmap_canvas_normal, #gmap_canvas_dot, #gmap_canvas_key, #gmap_canvas_dotkey, div.g_canvas{ width:100%; height:100%; } </style> |
JavaScript
上記の補足説明の通りです。
ここでは便宜上、JavaScriptのファイル上からボタンを出力しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<button class ="gmap_btn" id="drop" onclick="dropMaker();"/>マーカーを表示する</button> <button class ="gmap_btn" id="del" onclick="deleteMakers();"/>マーカーを削除する</button> <script type="text/javascript"> //global var marker = null; var gmap_canvas; var map_div = document.getElementById("gmap_canvas"); //地図を描画 function init(){ gmap_canvas = new google.maps.Map(map_div,{ center: new google.maps.LatLng(34.839450, 134.693903), zoom : 14, mapTypeId : google.maps.MapTypeId.ROADMAP }); dropMaker(); } //マーカーの生成と表示 function create_marker(options){ var m = new google.maps.Marker(options); return m; } //マーカーを落とす function dropMaker(){ //既にあるマーカーを一旦削除 deleteMakers(); //新たに生成 marker = create_marker({ map: gmap_canvas, position: new google.maps.LatLng(34.839450, 134.693903), }); } //マーカーを削除する function deleteMakers() { if(marker != null){ marker.setMap(null); } marker = null; } google.maps.event.addDomListener(window,"load",init); $('#ver').text(google.maps.version); </script> |
別途、GoogleMapsAPIのライブラリを読み込む記述が必要です。 ご自分が取得されたAPIキーを以下のコードの(YourAPIkey)部分に置き換えて設定してください。
|
1 |
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=(YourAPIkey)&v=3"></script> |
参考
Remove Markers | Google Maps JavaScript API | Google Developers
当サイトにお越しいただきありがとうございます。
当サイトは管理人アルゴリズンが個人で作成を行っているものです。
Google Inc.様とは一切関係はありません。
当サイト内のコンテンツの引用・出典の明記なきものは、
すべて管理人アルゴリズンが著作権を保持するオリジナルコンテンツです。
当サイトでご紹介しております写真等がある場合にも著作権の放棄は致しません。
申し訳ございませんが、無断転載、複製をお断りさせて頂いております。
尚、サイト内コンテンツを引用される際にはご連絡は不要です。
ただし、出典元として当サイト(個別URL)へのリンクをお願いいたします。
コンテンツを有益であると感じていただけましたら非常に光栄です。
ありがとうございます。
記事の作成依頼・更新依頼・削除要請などのご意見ご要望は、
まず、Twitter等よりメンションまたは、メッセージでご連絡を頂けますと幸いです。
@algorhythnn｜Twitter
algorhythnn｜Google+
algorhythnn｜Facebook
運営者はSNS等で個人名等の公開は行わないポリシーで運営しております。
直接のご連絡・取材時などには個人名・屋号でご連絡を差し上げる場合もございますが、
個人名・屋号等をインターネット上で公開されることはご遠慮願います。
公開日：
