Google Maps API v3:すべてのマーカーを削除するにはどうすればよいですか?


429

Google Maps API v2では、すべてのマップマーカーを削除したい場合は、次のようにするだけです。

map.clearOverlays();

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

リファレンスAPIを見ると、私にはわかりません。


3
以下のリンクでいくつかのコードを見つけましたが、聖なるものです-APIのv2で前の1行のコードをシミュレートするための多くのコードです。 lootogo.com/googlemapsapi3/markerPlugin.html
mp_

2
... 3.0は、モバイルデバイスは、可能な限り少し遅れなどでそれを使用するためには非常に軽いことを意味しているマップすることを覚えておいてください
Petrogad

1
ここで提案されているソリューションは、2010/07/29の時点で壊れているようです。代わりに提案する実用的なバージョンがあればいいのに。
ジョナサンハンソン

9
最高評価の答えは間違っています。この例のソースを表示して、その方法を確認してください:google-developers.appspot.com/maps/documentation/javascript/…–
Seb Ashton

回答:


487

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

I.グローバル変数を宣言します。

var markersArray = [];

II。関数を定義します。

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

または

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();関数を必要な場所に呼び出します。

それでおしまい!!


32
配列のfor..inループ?これは確かに良いことではありません..?..see:stackoverflow.com/questions/500504/...
ザック

4
または、marker.setVisible(false)を使用してマーカーを非表示にすることもできます
NBK

12
マーカーはまだ配列に保持されているため、どんどん大きくなります。ループの後でアレイもクリアすることをお勧めします
Ami

5
いつでも設定することができますmarkersArray:私は一種奇数の見つける代わりに、その長さを設定する空の配列にmarkersArray = [];
hellatan

11
while配列を処理するためのアプローチを使用しますwhile(markersArray.length) { markersArray.pop().setMap(null); }。その後、アレイをクリアする必要はありません。
YingYang 14

84

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

私はそれを修正しました、このように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


1
最終的に機能させる方法は、マーカーコレクションを繰り返し保存して、setMap(null)を使用することでした
Sebastian

4
しかし、これはマーカーをメモリからクリアしますか?JavaScriptには自動ガベージコレクションがあることに気づきましたが、setMap(null)が呼び出されたときに、GoogleのAPIがマーカーへの参照を保持していないことをどのように確認しますか?私のアプリケーションでは、大量のマーカーを追加して「削除」しますが、「削除」されたすべてのマーカーがメモリを消費するのは嫌です。
ニック

@Nick:「this.markers [i];を削除」を追加 setMap(null)ビットの後。
DaveS、2011年

4
この質問は、現在ドキュメントで回答されています。code.google.com/apis/maps/documentation/javascript/…–ラシュリー、2011
1

1
誰が使うのnew Array();
Rihards、2012年

47

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

マップ上にあるすべてのマーカーへの参照を配列で保持することをお勧めします。そして、すべてを削除したい場合は、配列をループして、各参照で.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()を呼び出すことで、マップ上のすべてのマーカーをいつでも見つけることができます。

短所

  • 今のようにプロトタイプとラッパーを使用すると、コードがGoogleコードに依存するようになります。ソースで市長が変更された場合、これは機能しなくなります。
  • あなたがそれを理解していないなら、壊れた場合それを修正することはできません。彼らがこれを壊す何かを変更する可能性は低いですが、それでも..
  • 1つのマーカーを手動で削除した場合、その参照は引き続きマーカー配列に残ります。(私のsetMapメソッドを編集して修正することもできますが、トラフマーカーの配列をループして参照を削除することを犠牲にしています)

1
+1私から。しかし、addMarkerを自動的に呼び出すラッパーを組み込んだ方がよいでしょう。
アンドリュー

アンドリュースの答えを実際に参照していると思います。あなたがコードで何を違うのか、そしてその理由を示しますか?ありがとう
mp_ 2009年

遅れて申し訳ありませんが、コードをすばやくテストする方法がなかったため、コードの投稿を控えていました。
森まいく

Maikuに感謝します。しかし、わかりません。例に新しいマーカーを追加するにはどうすればよいですか。繰り返しますが、どうもありがとうございました!
mp_ 2009年

1
setMap(null)を使用してみましたが、自動更新スクリプトがあり、50個ほどのマーカーをすべてnullマップに設定するたびに、DOMのどこかに浮かぶマップレスマーカーがたくさんありました。30秒ごとにDOMに50個の新しいマーカーが追加されたため、ページがクラッシュし続け、ページがビデオウォールで24時間年中無休で開いていたため、これは際限なく伝播しました。新しい回答を作成する前に、上位の回答を使用し、DOMからすべてのマップオーバーレイをクリアする必要がありました。これが誰かを助けることを願っています。私のページがクラッシュした理由を理解するのに長い時間がかかりました!:(
InterfaceGuy

23

これは、ユーザーの元の質問に対する元の応答の下でYingYang Mar 11 '14の15:049に最初に投稿されたすべてのソリューションの中で最も単純なものでした。

私は2。5年後の彼の同じソリューションをグーグルマップv3.18で使用していますが、それは魅力のように機能します

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

// No need to clear the array after that.

21
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にはないので、上記のカスタム実装を使用しました。

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


+1私から。google.maps.Markerコンストラクター(またはコンストラクターが内部的に呼び出していると思うのでsetMapメソッド)の周りにラッパーを追加します。
森まいく

@Maiku Mari、コードで、何を変えて何をするのか、理由を教えてください。ありがとう
mp_ 2009年

これが解決策ではないのはなぜですか?クリアする特定のマーカーでset_map(null)を使用してマーカーを削除します。すべてをクリアしたい場合は、この関数を使用してループします。あなたが何かをしたい場合は、よりここでそれを要求する:code.google.com/p/gmaps-api-issues/issues/...
Petrogad

ここから来たと思い
森まいく

6
-1悪いスタイル。作成されるマーカー配列は1つだけですが、clearMarkersの後でマップごとに1つあります(プロトタイプとのget / setの違いが原因です)。複数のマップオブジェクトに関する厄介なバグ。
トーマス

18

新しいバージョン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;
  }
}

6

Googleのデモギャラリーには、その方法に関するデモがあります。

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

ソースコードを表示して、マーカーがどのように追加されるかを確認できます。

簡単に言えば、マーカーをグローバル配列で保持します。それらをクリア/削除するとき、それらは配列をループして、指定されたマーカーオブジェクトで ".setMap(null)"を呼び出します。

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

「削除」は配列もクリアします。



6

解決策は非常に簡単です。次のメソッドを使用できます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 = [];
  }

これは私の完全なコードです。それは私が削減できる最も簡単なものです。 コード内で主要なgoogle APIに置き換えることができるように注意YOUR_API_KEYしてください。

<!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>

あなたは、グーグル開発者またはグーグル開発者ウェブサイト上の完全なドキュメンテーションに相談するかもしれません。


5

リンリンガーの答えのクリーンで簡単なアプリケーション。

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) ;
    }


4

マーカーを削除する方法の例を次に示します。

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 = [];
}

3

以下は、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()必要に応じて関数を呼び出します。

それでおしまい!!

お役に立てれば幸いです。


1
for(in in markersArray){}おそらく、期待どおりに動作しません。Arrayコードの他の場所で拡張されている場合は、インデックスだけでなく、それらのプロパティも反復処理します。そのJavaScriptバージョンは、markersArray.forEach()どこでもサポートされているわけではありません。あなたはより良いでしょうfor(var i=0; i<markersArray.length; ++i){ markersArray.setMap(null); }
キットSunde

3

最も簡単な方法として、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();

マーカーをクリアするためにそのライブラリーを引き込むのはかなりやり過ぎのようです。すべてのclearMarkersdoが呼び出すマーカーを反復ですmarker.setMap(null)(私はソースをチェックします)。それらを配列に入れて自分で行う作業は少なくなります。
キットSunde 2012

3

次の方法でも行うことができます。

function clearMarkers(category){ 
  var i;       

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

2

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


2

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

単に使用:

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

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

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

これを行う最もクリーンな方法は、マップのすべてのフィーチャを反復処理することです。マーカー(ポリゴン、ポリラインなどと共に)は、マップのデータレイヤーに格納されます。

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番目の方法をお勧めします。



0

理由はわかりsetMap(null)ませんが、を使用している場合、マーカーの設定が機能しませんでしたDirectionsRenderer

私の場合も私に電話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

マーカーの上を歩くだけで、マップからマーカーを削除できます。その後、マップマーカー配列を空にします。

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


0

私は提案されたソリューションをすべて試しましたが、すべてのマーカーがクラスターの下にある間は何もうまくいきませんでした。最終的に私はこれを置くだけです:

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();

-1

あなたはそれらを隠したり削除したりするように削除することを意味しますか?

非表示の場合:

function clearMarkers() {
            setAllMap(null);
        }

それらを削除したい場合:

 function deleteMarkers() {
            clearMarkers();
            markers = [];
        }

配列マーカーを使用して追跡し、手動でリセットしていることに注意してください。


-1

そのマーカーにマップnullを設定する必要があります。

var markersList = [];    

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

function addMarkers() {
   var marker = new google.maps.Marker({
        position : {
            lat : 12.374,
            lng : -11.55
        },
        map : map
       });
      markersList.push(marker);
   }

-1

私は簡単な解決策を見つけました(私は思う):

var marker = new google.maps.Marker();

function Clear(){
     marker.setMap(null);
}



-3

これはおそらく同じような解決策かもしれませんが、これは私がやっていることです

$("#map_canvas").html("");
markers = [];

いつも私のために働く。


2
$( "#map_canvas")。html( ""); 実際にはマップdiv全体をクリーンにワイプし、jQueryにも依存しているため、応答は愚かで役に立たないものになります。
Sam

はい、そうです。マップとマーカーを初期化します
kronus

しかし、彼は既存のマーカーを削除したいマップを再初期化したくありません...
Sam

私は、既存のマーカーを削除するために見つけた方法を提供しています。少なくとも試してみて、うまくいったかどうか教えてください。それは私のために働きます
クロノス

2
マップマーカーを削除したいのは、マップを再初期化する必要がないようにするためです。私のような状況では、マップを描画するためにgoogles描画ライブラリを使用していたので、オフにして描画したすべてのオーバーレイを再初期化すると、マップ全体を再初期化しました。停止する唯一の方法は、すべてのオーバーレイを保存して再度追加することです。これも不要な作業です。マップを再初期化してもマーカーは削除されず、マップを最初から再作成してもマーカーは削除されません。
2015
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.