Google Mapへ追加したマーカーをすべてクリアする - Google Map

Google MAP APIを使って描画したマーカー(アイコン)をクリアします。

マーカーの削除

Marker.setMap(null);メソッドを呼び出すことでマーカーを削除できます。地図上に置いたマーカーをすべて削除する場合はすべてのマーカーについてsetMap(null)メソッドを呼び出す必要があるため、マーカーはアプリケーション側で管理する必要があります。

コード

JavaScript

var map;
var MarkerArray = new google.maps.MVCArray();

function PlotIcon(lat,lng,caption) {
  var image = '/res/icon.png';
  var myLatLng = new google.maps.LatLng(lat,lng);
  var Marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    icon: image,
    title:caption
  });
  MarkerArray.push(Marker);

  map.setZoom(15);
  map.panTo(myLatLng);
}

function ClearAllIcon() {
  MarkerArray.forEach(function (marker, idx) { marker.setMap(null); });
}

解説

GoogleMapが表示されているプログラムに上記のJavaScript関数を追加します。

var MarkerArray = new google.maps.MVCArray();

にてマーカーを管理する配列を作成します。

var image = '/res/icon.png';
var myLatLng = new google.maps.LatLng(lat,lng);
var Marker = new google.maps.Marker({
  position: myLatLng,
  map: map,
  icon: image,
  title:caption
});

はマーカーを地図に追加する処理です。

MarkerArray.push(Marker);

にて、追加したマーカーをリストに追加します。

map.setZoom(15);
map.panTo(myLatLng);

はズーム率を指定し、追加したマーカーの位置に地図のビューポートを移動させるメソッドです。

function ClearAllIcon() {
  MarkerArray.forEach(function (marker, idx) { marker.setMap(null); });
}

がマーカーのクリアをする関数です。
forEach()メソッドを用いてMarkerArray内のすべての要素に対してmarker.setMapp(null);を実行します。