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

このページのタグ:[HTML] [JavaScript] [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);を実行します。

プライバシー    iPentecについて
iPentec all rights reserverd. (ISDC)