マップ上で１つを残してマーカーを削除する ｜Google Maps API v3
GoogleMapsAPIにてマーカーを複数表示したら、
ユーザーの操作に応じてその中から指定のマーカーを残して他を消す必要がある場合もあります。
生成した複数のマーカーから一部を残し残りを消す処理についてご紹介します。
概要
マップ上で１つを残してマーカーを削除する ｜Google Maps API v3
以下が実際の表示例です。
初期で１５個のマーカーを表示し「姫路城以外を削除」をクリックすると、
表示されている「姫路城」を示すマーカー以外を削除します。
「マーカーを全て表示する」をクリックすると、
一旦、すべてのマーカーを削除の上、新しく１５個のマーカーを表示します。
以下のボタンで動作を確認できます。
マーカーを全て表示する 姫路城以外を削除
補足説明
前回の「マーカーを削除する（基本）」でご紹介した例では、
生成したマーカーインスタンスを、グローバル変数に格納し処理していました。
今回はマーカーが複数になりますので、
生成したマーカーインスタンスを、オブジェクト配列で保持しています。
「マーカーを全て表示する」「姫路城のみ削除」それぞれのボタンは、
単純に関数を呼び出す処理になっています。
「姫路城以外を削除」ボタンの「deleteMakers([1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]);」と、
パラメータに「1,2,3,4,5,6,7,8,9,10,11,12,13,14,15」を渡す記述によって、
姫路城のIDである「0」以外を削除するようにしています。
|
1 2 |
<button class ="gmap_btn" id="drop" onclick="dropMakers();"/>マーカーを全て表示する</button> <button class ="gmap_btn" id="del" onclick="deleteMakers([1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]);"/>姫路城以外を削除</button> |
実は、以下の処理もすべて同じ処理を利用しています。
違いは「ボタン」からの呼び出し方法のみです。
マーカーのデータ保持
マーカーを表示する際の位置情報データは、
以下のように記述し、準備しています。
配列の中に連想配列を格納する多次元配列の構造になっています。
これによって「points[0]」のインデックスでは、
「{location:”姫路城”, latlng:{lat: 34.839450, lng:134.693903}}」が得られます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
var points = [ {location:"姫路城", latlng:{lat: 34.839450, lng:134.693903}}, {location:"大手門（姫路城）", latlng:{lat:34.83605 , lng:134.6931199}}, {location:"菱の門（姫路城）", latlng:{lat:34.8386654 , lng:134.6924566}}, {location:"いの門（姫路城）", latlng:{lat:34.839149 , lng:134.692505}}, {location:"ろの門（姫路城）", latlng:{lat:34.8393545 , lng:134.6927349}}, {location:"はの門（姫路城）", latlng:{lat:34.8395619 , lng:134.6930339}}, {location:"にの門（姫路城）", latlng:{lat:34.8396451 , lng:134.693265}}, {location:"ほの門（姫路城）", latlng:{lat:34.839660 , lng:134.693602}}, {location:"への門（姫路城）", latlng:{lat:34.839550 , lng:134.694236}}, {location:"との一門（姫路城）", latlng:{lat:34.839373 , lng:134.694409}}, {location:"との二門（姫路城）", latlng:{lat:34.839411 , lng:134.694480}}, {location:"との四門（姫路城）", latlng:{lat:34.839064 , lng:134.694884}}, {location:"ちの門（姫路城）", latlng:{lat:34.839325 , lng:134.694375}}, {location:"りの門（姫路城）", latlng:{lat:34.838754 , lng:134.694153}}, {location:"ぬの門（姫路城）", latlng:{lat:34.8388135 , lng:134.6934537}}, {location:"るの門（姫路城）", latlng:{lat:34.838744 , lng:134.693244}} ]; |
マーカーの生成
マーカーの生成時に格納するグローバル変数の配列「markers = []」に対して
「markers.push(marker)」部分で、
新しい要素にマーカーインスタンスを格納しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
var markers = []; （中略） function create_marker(options){ var m = new google.maps.Marker(options); return m; } //マーカーを落とす function dropMakers(){ //既にあるマーカーを一旦削除 deleteMakers(); //新たに生成 var i=0; for (i=0; i < lcnt; i++){ marker = create_marker({ map: gmap_canvas, position: points[i].latlng, title:points[i].location }); //ここで生成したマーカーを順次格納する markers.push(marker); } } |
マーカーの削除
マーカーの削除では削除ボタンの「deleteMakers([1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]);」によって、
パラメータに「0」が渡された形で関数が呼ばれます。
その為、null以外である、以下の部分の１０～１５行目が実行されます。
「markers」配列に格納されている要素すべて（markers.length）を順次ループ処理し、
指定されたインデックス(例：1,2,3,4,5,6,7,8,9,10,11,12,13,14,15)と一致した場合、
「markers[i].setMap(null);」でnullをセットし、マーカーの削除を行っています。
※マーカーをすべて削除した場合「markers」配列への参照は不要になります。
「markers[i].setMap(null)」だけではマーカーに対する参照が残ってしまい、
メモリの開放が行われない為「markers = []」にて明示的にnullをセットしています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
//マーカーを削除する function deleteMakers(idx=null) { if(idx == null){ //生成済マーカーを順次すべて削除する for (var i = 0; i < markers.length; i++) { markers[i].setMap(null); } markers = []; //参照を開放 }else{ //生成済マーカーからID指定されたマーカーを削除 for (var i = 0; i < markers.length; i++) { if(idx.indexOf(i) >= 0){ markers[i].setMap(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
１行目でGoogle Maps API のライブラリ読み込みを行っています。
Google Mapを表示するエリア(id=”gmap_canvas”)のDOMオブジェクトを取得し、
取得したDOMオブジェクトに対して、生成したGoogle Mapインスタンスを割り当てています。
Google Mapインスタンスの生成時に、
中心座標を「center: new google.maps.LatLng(34.839450, 134.693903)」と指定しています。
※LatLng(34.839450, 134.693903)は、兵庫県姫路市の姫路城を示しています。
|
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 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
<button class ="gmap_btn" id="drop" onclick="dropMakers();"/>マーカーを全て表示する</button> <button class ="gmap_btn" id="del" onclick="deleteMakers([1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]);"/>姫路城以外を削除</button> <script type="text/javascript"> //global var markers = []; var gmap_canvas; var map_div = document.getElementById("gmap_canvas"); var points = [ {location:"姫路城", latlng:{lat: 34.839450, lng:134.693903}}, {location:"大手門（姫路城）", latlng:{lat:34.83605 , lng:134.6931199}}, {location:"菱の門（姫路城）", latlng:{lat:34.8386654 , lng:134.6924566}}, {location:"いの門（姫路城）", latlng:{lat:34.839149 , lng:134.692505}}, {location:"ろの門（姫路城）", latlng:{lat:34.8393545 , lng:134.6927349}}, {location:"はの門（姫路城）", latlng:{lat:34.8395619 , lng:134.6930339}}, {location:"にの門（姫路城）", latlng:{lat:34.8396451 , lng:134.693265}}, {location:"ほの門（姫路城）", latlng:{lat:34.839660 , lng:134.693602}}, {location:"への門（姫路城）", latlng:{lat:34.839550 , lng:134.694236}}, {location:"との一門（姫路城）", latlng:{lat:34.839373 , lng:134.694409}}, {location:"との二門（姫路城）", latlng:{lat:34.839411 , lng:134.694480}}, {location:"との四門（姫路城）", latlng:{lat:34.839064 , lng:134.694884}}, {location:"ちの門（姫路城）", latlng:{lat:34.839325 , lng:134.694375}}, {location:"りの門（姫路城）", latlng:{lat:34.838754 , lng:134.694153}}, {location:"ぬの門（姫路城）", latlng:{lat:34.8388135 , lng:134.6934537}}, {location:"るの門（姫路城）", latlng:{lat:34.838744 , lng:134.693244}} ]; var lcnt = points.length-1; //地図を描画 function init(){ gmap_canvas = new google.maps.Map(map_div,{ center: points[0].latlng, zoom : 17, mapTypeId : google.maps.MapTypeId.ROADMAP }); dropMakers(); } //マーカーの生成と表示 function create_marker(options){ var m = new google.maps.Marker(options); return m; } //マーカーを落とす function dropMakers(){ //既にあるマーカーを一旦削除 deleteMakers(); //新たに生成 var i=0; for (i=0; i < lcnt; i++){ marker = create_marker({ map: gmap_canvas, position: points[i].latlng, title:points[i].location }); //ここで生成したマーカーを順次格納する markers.push(marker); } } //マーカーを削除する function deleteMakers(idx=null) { if(idx == null){ //生成済マーカーを順次すべて削除する for (var i = 0; i < markers.length; i++) { markers[i].setMap(null); } markers = []; //参照を開放 }else{ //生成済マーカーからID指定されたマーカーを削除 for (var i = 0; i < markers.length; i++) { if(idx.indexOf(i) >= 0){ markers[i].setMap(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等で個人名等の公開は行わないポリシーで運営しております。
直接のご連絡・取材時などには個人名・屋号でご連絡を差し上げる場合もございますが、
個人名・屋号等をインターネット上で公開されることはご遠慮願います。
公開日：
