web-dev-qa-db-ja.com

Google Maps API v3：すべてのマーカーを削除する方法

Google Maps API v2では、すべての地図マーカーを削除する場合は、次のようにします。

map.clearOverlays();

Google Maps API v3 でこれを行うにはどうすればよいですか。

Reference API を見ると、私にはわかりません。

javascripthtmlgoogle-mapsgoogle-maps-api-3
415
mp_

次のようにしてください。

I.グローバル変数を宣言する：

var markersArray = [];

II。関数を定義します。

function clearOverlays() {
  for (var i = 0; i < markersArray.length; i++ ) {
    markersArray[i].setMap(null);
  }
  markersArray.length = 0;
}

OR

google.maps.Map.prototype.clearOverlays = function() {
  for (var i = 0; i < markersArray.length; i++ ) {
    markersArray[i].setMap(null);
  }
  markersArray.length = 0;
}

III。以下を呼び出す前に、「markerArray」でマーカーをプッシュしてください。

markersArray.Push(marker);
google.maps.event.addListener(marker,"click",function(){});

IV。必要に応じてclearOverlays();またはmap.clearOverlays();関数を呼び出します。

それでおしまい！！

473
anon

同じ問題です。このコードはもう機能しません。

私はそれを修正しました、clearMarkersメソッドをこのように変更します：

set_map（null）---> setMap（null）

google.maps.Map.prototype.clearMarkers = function() {
    for(var i=0; i < this.markers.length; i++){
        this.markers[i].setMap(null);
    }
    this.markers = new Array();
};

トピックの詳細を含むようにドキュメントが更新されました： https://developers.google.com/maps/documentation/javascript/markers#remove

83
Pons

V3にはまだそのような機能はないようです。

地図上にあるすべてのマーカーへの参照を配列で保持することをお勧めします。そして、em allを削除したい場合は、配列をループ処理して各参照に対して.setMap（null）メソッドを呼び出すだけです。

詳細についてはこの質問を参照してください/コード。

私のバージョン：

google.maps.Map.prototype.markers = new Array();

google.maps.Map.prototype.getMarkers = function() {
    return this.markers
};

google.maps.Map.prototype.clearMarkers = function() {
    for(var i=0; i<this.markers.length; i++){
        this.markers[i].setMap(null);
    }
    this.markers = new Array();
};

google.maps.Marker.prototype._setMap = google.maps.Marker.prototype.setMap;

google.maps.Marker.prototype.setMap = function(map) {
    if (map) {
        map.markers[map.markers.length] = this;
    }
    this._setMap(map);
}

このコードを編集したものです http://www.lootogo.com/googlemapsapi3/markerPlugin.html addMarkerを手動で呼び出す必要がなくなりました。

長所

  • こうすることで、コードをコンパクトにまとめて1か所にまとめることができます（名前空間を汚染することはありません）。
  • あなたはもはやあなた自身でマーカーを追跡する必要はありませんあなたはいつでもmap.getMarkers（）を呼び出すことによってマップ上のすべてのマーカーを見つけることができます

短所

  • 私が今やったようにプロトタイプとラッパーを使うことは私のコードをグーグルコードに依存するようにします、それらが彼らのソースの市長の変更をするならこれは壊れます。
  • あなたがそれを理解していないなら、あなたはそれが壊れるならばあなたはそれを直すことができないでしょう。彼らがこれを壊す何かを変えるつもりであるという可能性は低いですが、それでも..
  • 1つのマーカーを手動で削除しても、その参照はマーカー配列に残ります。 （あなたはそれを修正するために私のsetMapメソッドを編集することができますが、トラフのマーカー配列をループして参照を削除することを犠牲にして）
46
Maiku Mori

これは、もともと YingYang Mar 11 '14 at 15：049 によって投稿されたすべての解決策の中で最も簡単でした。

私は2.5年後にグーグルマップv3.18で彼の同じ解決策を使っています、そしてそれは魅力のように働きます

markersArray.Push(newMarker) ;
while(markersArray.length) { markersArray.pop().setMap(null); }

// No need to clear the array after that.
23
rolinger
google.maps.Map.prototype.markers = new Array();

google.maps.Map.prototype.addMarker = function(marker) {
    this.markers[this.markers.length] = marker;
};

google.maps.Map.prototype.getMarkers = function() {
    return this.markers
};

google.maps.Map.prototype.clearMarkers = function() {
    for(var i=0; i<this.markers.length; i++){
        this.markers[i].setMap(null);
    }
    this.markers = new Array();
};

私はV3にそれがあるとは思わないので、私は上記のカスタム実装を使いました。

免責事項：私はこのコードを書いていませんでしたが、コードベースにマージしたときに参照を保持するのを忘れていたので、どこから来たのかわかりません。

21
Andrew

新バージョンv3では、配列を保持することを推奨しました。次のように。

overlay-overview のサンプルを参照してください。

var map;
var markersArray = [];

function initialize() {
  var haightAshbury = new google.maps.LatLng(37.7699298, -122.4469157);
  var mapOptions = {
    zoom: 12,
    center: haightAshbury,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };
  map =  new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

  google.maps.event.addListener(map, 'click', function(event) {
    addMarker(event.latLng);
  });
}

function addMarker(location) {
  marker = new google.maps.Marker({
    position: location,
    map: map
  });
  markersArray.Push(marker);
}

// Removes the overlays from the map, but keeps them in the array
function clearOverlays() {
  if (markersArray) {
    for (i in markersArray) {
      markersArray[i].setMap(null);
    }
  }
}

// Shows any overlays currently in the array
function showOverlays() {
  if (markersArray) {
    for (i in markersArray) {
      markersArray[i].setMap(map);
    }
  }
}

// Deletes all markers in the array by removing references to them
function deleteOverlays() {
  if (markersArray) {
    for (i in markersArray) {
      markersArray[i].setMap(null);
    }
    markersArray.length = 0;
  }
}
16
Jirapong
for (i in markersArray) {
  markersArray[i].setMap(null);
}

iEのみに取り組んでいます。

for (var i=0; i<markersArray.length; i++) {
  markersArray[i].setMap(null);
}

クロム、Firefoxに取り組んで、すなわち...

6
Nguoi Viet Nam

解決策は非常に簡単です。メソッドmarker.setMap(map);を使うことができます。ここでは、どの地図にピンを表示するかを定義します。

そのため、このメソッドにnullを設定すると（marker.setMap(null);）、ピンは消えます。

これで、マップ内のすべてのマーカーを消しながら関数魔女を書くことができます。

ピンを配列に入れてmarkers.Push (your_new pin)またはこのコードで宣言するだけでいいのです。

// Adds a marker to the map and Push to the array.
function addMarker(location) {
  var marker = new google.maps.Marker({
    position: location,
    map: map
  });
  markers.Push(marker);
}

これは、魔女がマップ内のあなたの配列のすべてのマーカーを設定したり消したりできる機能です。

// Sets the map on all markers in the array.
  function setMapOnAll(map) {
    for (var i = 0; i < markers.length; i++) {
      markers[i].setMap(map);
    }
  }

すべてのマーカーを消すには、nullを付けて関数を呼び出す必要があります。

// Removes the markers from the map, but keeps them in the array.
  function clearMarkers() {
    setMapOnAll(null);
  }

そして、すべてのマーカーを削除して消えるには、次のようにマーカーの配列をリセットします。

// Deletes all markers in the array by removing references to them.
  function deleteMarkers() {
    clearMarkers();
    markers = [];
  }

これが私の完全なコードです。それは私が減らすことができる最も簡単なものです。 十分に注意してください コードのYOUR_API_KEYをあなたのキーとなるGoogle APIに置き換えることができます。

<!DOCTYPE html>
<html>
  <head>
  <title>Remove Markers</title>
  <style>
     /* Always set the map height explicitly to define the size of the div
     * element that contains the map. */
     #map {
       height: 100%;
       }
  </style>
</head>
<body>

<div id="map"></div>
<p>Click on the map to add markers.</p>
<script>

  // In the following example, markers appear when the user clicks on the map.
  // The markers are stored in an array.
  // The user can then click an option to hide, show or delete the markers.
  var map;
  var markers = [];

  function initMap() {
    var haightAshbury = {lat: 37.769, lng: -122.446};

    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 12,
      center: haightAshbury,
      mapTypeId: 'terrain'
    });

    // This event listener will call addMarker() when the map is clicked.
    map.addListener('click', function(event) {
      addMarker(event.latLng);
    });

    // Adds a marker at the center of the map.
    addMarker(haightAshbury);
  }

   // Adds a marker to the map and Push to the array.
  function addMarker(location) {
    var marker = new google.maps.Marker({
      position: location,
      map: map
    });
    markers.Push(marker);
  }

  // Sets the map on all markers in the array.
  function setMapOnAll(map) {
    for (var i = 0; i < markers.length; i++) {
      markers[i].setMap(map);
    }
  }

  // Removes the markers from the map, but keeps them in the array.
  function clearMarkers() {
    setMapOnAll(null);
  }

  // Shows any markers currently in the array.
  function showMarkers() {
    setMapOnAll(map);
  }

  // Deletes all markers in the array by removing references to them.
  function deleteMarkers() {
    clearMarkers();
    markers = [];
  }

</script>
   <script async defer
    src="https://maps.googleapis.com/maps/api/js key=YOUR_API_KEY&callback=initMap">
   </script>
</body>
</html>

google developer または google developer web site の完全なドキュメントを参照することもできます。

6
SphynxTech

グーグルのデモギャラリーは、彼らがどのようにそれをするかについてのデモを持っています：

http://code.google.com/apis/maps/documentation/javascript/examples/overlay-remove.html

ソースコードを表示してマーカーの追加方法を確認できます。

端的に言えば、彼らはグローバルな配列でマーカーを保ちます。それらをクリア/削除するとき、それらは配列をループし、与えられたマーカーオブジェクトに対して ".setMap（null）"を呼び出します。

しかし、この例は1つの「トリック」を示しています。この例で「クリア」とは、それらをマップから削除し、それらを配列に保持することを意味します。これにより、アプリケーションはそれらをマップにすばやく再追加できます。ある意味で、これはそれらを「隠す」ような働きをします。

"Delete"を押すと配列もクリアされます。

6
jmbertucci

Rolinger's answerのクリーンで簡単なアプリケーション。

function placeMarkerAndPanTo(latLng, map) {
      while(markersArray.length) { markersArray.pop().setMap(null); }
      var marker = new google.maps.Marker({
        position: latLng,
        map: map
      });
      map.panTo(latLng);

      markersArray.Push(marker) ;
    }
5
Adam Starrh

両方の回答に投稿された "set_map"関数は、Google Maps v3 APIでは機能しなくなったようです。

何が起こったのだろうか

更新：

Googleが "set_map"が "setMap"ではないようにAPIを変更したようです。

http://code.google.com/apis/maps/documentation/v3/reference.html

4
GregN

ここでは、マーカーを削除する方法の例を見つけることができます。

https://developers.google.com/maps/documentation/javascript/examples/marker-remove?hl=es

// Add a marker to the map and Push to the array.
function addMarker(location) {
  var marker = new google.maps.Marker({
    position: location,
    map: map
  });
  markers.Push(marker);
}

// Sets the map on all markers in the array.
function setAllMap(map) {
  for (var i = 0; i < markers.length; i++) {
    markers[i].setMap(map);
   }
}

// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
  setAllMap(null);
}

// Deletes all markers in the array by removing references to them.
function deleteMarkers() {
  clearMarkers();
  markers = [];
}
4
Freddie

最も簡単な方法として、google-maps-utility-library-v3プロジェクトのmarkermanagerライブラリを使用しています。

1. MarkerManagerを設定します 

mgr = new MarkerManager(map);
google.maps.event.addListener(mgr, 'loaded', function () {
    loadMarkers();
});

2. MarkerManagerにマーカーを追加します 

function loadMarkers() {
  var marker = new google.maps.Marker({
            title: title,
            position: latlng,
            icon: icon
   });
   mgr.addMarker(marker);
   mgr.refresh();
 }

3.マーカーをクリアするには、MarkerMangerのclearMarkers()関数を呼び出すだけです 

mgr.clearMarkers();
3
Craig Fruin

Anonの次の記事は完璧に動作しますが、オーバーレイを繰り返し消去するとちらつきがあります。

次のようにしてください。

I.グローバル変数を宣言する：

var markersArray = [];

II。関数を定義します。

function clearOverlays() {
  if (markersArray) {
    for (i in markersArray) {
      markersArray[i].setMap(null);
    }
  }
}

III。次を呼び出す前に 'markerArray'にマーカーを入れてください。

markersArray.Push(marker);
google.maps.event.addListener(marker,"click",function(){});

IV。必要に応じてclearOverlays()関数を呼び出す

それでおしまい！！

お役に立てば幸いです。

3
middlewhere

これをkmlLayer.setMap（null）で試したところ、うまくいきました。それが通常のマーカーでうまくいくかどうかはわかりませんが、正しく機能するように見えます。

2
bokor

ポリ、マーカーなどを含むすべてのオーバーレイをクリアする.

単に使用する：

map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);}

これは私が地図アプリケーション上でそれを形成するために書いた関数です。

  function clear_Map() {
    directionsDisplay = new google.maps.DirectionsRenderer();
    //var chicago = new google.maps.LatLng(41.850033, -87.6500523);
    var myOptions = {
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: HamptonRoads
    }

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById("directionsPanel"));
}
2
Will

マップからすべてのマーカーを削除するには、次のような関数を作成します。

1.addMarker（location）：地図上にマーカーを追加するために使用されるこの関数

2.clearMarkers（）：この関数は配列からではなくマップからすべてのマーカーを削除します

3.setMapOnAll（map）：配列内にマーカー情報を追加するために使用されるこの関数

4.deleteMarkers（）：この関数は、参照を削除することによって配列内のすべてのマーカーを削除します。

// Adds a marker to the map and Push to the array.
      function addMarker(location) {
        var marker = new google.maps.Marker({
          position: location,
          map: map
        });
        markers.Push(marker);
      }


// Sets the map on all markers in the array.
      function setMapOnAll(map) {
        for (var i = 0; i < markers.length; i++) {
          markers[i].setMap(map);
        }
      }



// Removes the markers from the map, but keeps them in the array.
  function clearMarkers() {
    setMapOnAll(null);
  }

// Deletes all markers in the array by removing references to them.
      function deleteMarkers() {
        clearMarkers();
        markers = [];
      }
2
Rock Star

これを行う最も簡単な方法は、マップのすべての機能を反復処理することです。マーカーは（ポリゴン、ポリラインなどと共に）マップの データレイヤ に格納されます。

function removeAllMarkers() {
  map.data.forEach((feature) => {
    feature.getGeometry().getType() === 'Point' ? map.data.remove(feature) : null
  });
}

マーカーが drawing manager を介して追加されている場合は、グローバル配列のマーカーを作成するか、作成時にマーカーをデータレイヤーにプッシュするのが最善です。

google.maps.event.addListener(drawingManager, 'overlaycomplete', (e) => {
    var newShape = e.overlay;
    newShape.type = e.type;

    if (newShape.type === 'marker') {
      var pos = newShape.getPosition()
      map.data.add({ geometry: new google.maps.Data.Point(pos) });

      // remove from drawing layer
      newShape.setMap(null);
    }
  });

後で他のgoogle.maps.dataクラスメソッドを使用できるようにするので、2番目の方法をお勧めします。

2
Mimo

あなたもそれをこのようにすることができます：

function clearMarkers(category){ 
  var i;       

  for (i = 0; i < markers.length; i++) {                          
    markers[i].setVisible(false);        
  }    
}
2
kolis29

これはGoogle自身が少なくとも1つのサンプルで使用する方法です。

var markers = [];

// Clear out the old markers.
markers.forEach(function(marker) {
  marker.setMap(null);
});
markers = [];

完全なコード例については、Googleのサンプルを確認してください。

https://developers.google.com/maps/documentation/javascript/examples/places-searchbox

1
Ogglas

理由はわかりませんが、DirectionsRendererを使用しているときにsetMap(null)を自分のマーカーに設定するとうまくいきませんでした。

私の場合は、setMap(null)をDirectionsRendererにも呼び出す必要がありました。

そんな感じ：

var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();

if (map.directionsDisplay) {
    map.directionsDisplay.setMap(null);
}

map.directionsDisplay = directionsDisplay;

var request = {
    Origin: start,
    destination: end,
    travelMode: google.maps.TravelMode.DRIVING
};

directionsDisplay.setMap(map);
directionsService.route(request, function (result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(result);
    }
});
0
Felipe Miosso

私はすべての提案された解決策を試してみましたが、私のすべてのマーカーがクラスタの下にある間は何もうまくいきませんでした。結局私はちょうどこれを置く：

var markerCluster = new MarkerClusterer(map, markers,
    { imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m' });
agentsGpsData[agentGpsData.ID].CLUSTER = markerCluster;

//this did the trick
agentsGpsData[agentId].CLUSTER.clearMarkers();

言い換えれば、クラスター内でマーカーをラップしていて、すべてのマーカーを削除したい場合は、次のように呼び出します。

clearMarkers();
0
Geka P

私は仕事をうまくやる略記を使います。やるだけ

    map.clear();
0
Uchenna Nnodim

googleマップをクリアするだけ

mGoogle_map.clear();
0
RejoylinLokeshwaran

マーカーの上を歩いてマップから削除するだけです。その後、空のマップマーカーの配列を表示します。

var markers = map.markers;
for(var i = 0; i < markers.length; i++) {
    markers[i].setMap(null);
}
map.markers = [];
0
kaiser