複数のマーカーをまとめて地図上から削除する

Google Maps API v3では、マーカーのようなオーバーレイは、基本的にプログラム側で全て管理を行なわなければなりません。 Maps API v2で使われていたGMap2.clearOverlays()のような機能は用意されていません。 Maps API v3で、地図上のマーカーを削除するには、『Marker.setMap(null);』が基本です。地図上の全てのマーカーを削除するには、1つ1つにこれを行なわなければなりません。

MVCArray.forEach は、複数の要素に対して一括で処理をしたいときに役立ちます。 forEachにはコールバック関数を指定でき、引数には「配列の要素」と「インデックス」が渡されます。例えば、下記のコードの例では、マーカーに対して一括でsetMap を実行しています。

var marker_list = new google.maps.MVCArray();
marker_list.push(marker1);
marker_list.push(marker2);
　：

marker_list.forEach(function(mkr, idx){
  mkr.setMap(map);
});

同じ要領で、あらかじめマーカーのリストを作成しておき、MVCArray.forEach で全マーカーに対して、 marker.setMap(null)を実行することで、地図上から全てマーカーを削除することが可能になります。

コード

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&hl=ja"></script>
<script type="text/javascript">
  var map_canvas, marker_list;
  function initialize() {
    //マーカーを管理するためのmarker_list
    marker_list = new google.maps.MVCArray();

    var initPos = new google.maps.LatLng(35.127152, 138.910627);
    var myOptions = {
      noClear : true,
      center : initPos,
      zoom : 5,
      mapTypeId : google.maps.MapTypeId.ROADMAP
    };
    map_canvas = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    google.maps.event.addListenerOnce(map_canvas, "bounds_changed", load);
  };
  
  function load(){
    //適当にマーカーを作成
    var bounds = map_canvas.getBounds();
    var sw = bounds.getSouthWest();
    var ne = bounds.getNorthEast();
    for(var i = 0; i < 10; i++) {
      var lat = Math.random() * (ne.lat() - sw.lat()) + sw.lat();
      var lng = Math.random() * (ne.lng() - sw.lng()) + sw.lng();
      var latlng = new google.maps.LatLng(lat, lng);
      
      
      //マーカーを作成したら marker_list に追加
      var marker = createMarker(map_canvas, latlng);
      marker_list.push(marker);
    }
  }
  function createMarker(map, latlng) {
    var marker = new google.maps.Marker();
    marker.setPosition(latlng);
    marker.setMap(map);
    return marker;
  }
  function removeMarkers() {
    //ボタンが押されたら、マーカーの配列に対して
    //setMap(null)を実行し、地図から削除
    marker_list.forEach(function(marker, idx) {
      marker.setMap(null);
    });
  }
  google.maps.event.addDomListenerOnce(window, "load", initialize);
</script>


<div id="map_canvas" style="width:500px; height:500px"></div>
<input type="button" onclick="removeMarkers();" value="マーカーを全て削除する"><br>