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

マップ上で1つのマーカーを削除する |Google Maps API v3

GoogleMapsAPIにてマーカーを複数表示したら、
ユーザーの操作に応じてその中から指定のマーカーのみを消す必要がある場合もあります。
生成した複数のマーカーから一部のみを消す処理についてご紹介します。

 

マップ上で1つのマーカーを削除する |Google Maps API v3

以下が実際の表示例です。
初期で15個のマーカーを表示し「姫路城のみ削除」をクリックすると、
表示されている「姫路城」を示すマーカーのみを削除します。

「マーカーを全て表示する」をクリックすると、
一旦、すべてのマーカーを削除の上、新しく15個のマーカーを表示します。

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

 

補足説明

前回の「マーカーを削除する(基本)」でご紹介した例では、
生成したマーカーインスタンスを、グローバル変数に格納し処理していました。

今回はマーカーが複数になりますので、
生成したマーカーインスタンスを、オブジェクト配列で保持しています。

「マーカーを全て表示する」「姫路城のみ削除」それぞれのボタンは、
単純に関数を呼び出す処理になっています。

「姫路城のみ削除」ボタンの「onclick=”deleteMakers([0]);”」と、
パラメータに「0」を渡す記述によって、
姫路城のIDのみを削除するようにしています。

 

実は、以下の処理もすべて同じ処理を利用しています。
違いは「ボタン」からの呼び出し方法のみです。

 

マーカーのデータ保持

マーカーを表示する際の位置情報データは、
以下のように記述し、準備しています。

配列の中に連想配列を格納する多次元配列の構造になっています。

これによって「points[0]」のインデックスでは、
「{location:”姫路城”, latlng:{lat: 34.839450, lng:134.693903}}」が得られます。

 

マーカーの生成

マーカーの生成時に格納するグローバル変数の配列「markers = []」に対して
「markers.push(marker)」部分で、
新しい要素にマーカーインスタンスを格納しています。

マーカーの削除

マーカーの削除では削除ボタンの「onclick=”deleteMakers(0);」によって、
パラメータに「0」が渡された形で関数が呼ばれます。
その為、null以外である、以下の部分の10~15行目が実行されます。

「markers」配列に格納されている要素すべて(markers.length)を順次ループ処理し、
指定されたインデックス(例:0)と一致した場合「markers[i].setMap(null);」でnullをセットし、
マーカーの削除を行っています。

※マーカーをすべて削除した場合「markers」配列への参照は不要になります。
「markers[i].setMap(null)」だけではマーカーに対する参照が残ってしまい、
メモリの開放が行われない為「markers = []」にて明示的にnullをセットしています。

 

サンプルコード

HTML

HTMLではGoogle Mapを表示するエリア(<div id=”gmap_canvas”></div>)を配置しています。
エリアを囲んでいる「<div class=”aspect”></div>」部分は、
ページ表示用の高さ制御用のタグです。

 

CSS

CSSではclass=”aspect”に対して、 幅100%を指定し、高さをビューポートの50%としています。 GoogleMapを表示するエリア(id=”gmap_canvas”)のサイズを、 class=”aspect”に対しての幅・高さを100%として指定しています。

JavaScript

上記の補足説明の通りです。
ここでは便宜上、JavaScriptのファイル上からボタンを出力しています。

別途、GoogleMapsAPIのライブラリを読み込む記述が必要です。  ご自分が取得されたAPIキーを以下のコードの(YourAPIkey)部分に置き換えて設定してください。

 

参考

Remove Markers  |  Google Maps JavaScript API  |  Google Developers


公開日:

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