Googleマップのすべてのマーカーを削除する方法（xmlファイルを使用）

Question

マップ上のすべてのマーカーを削除しようとしています。

私が使用することを試みた：

marker.setMap(null) 

しかし、それは唯一つのマーカーを削除します。

マップ上のすべてのマーカーを削除するにはどうすればよいですか？ https://jsfiddle.net/j027mww1/67/

Answer 1

問題は、あなたのマーカー変数は最後のマーカーを保存することです：

は、ここに私のコードです。

すべてのマーカーを配列にプッシュする必要があります。この配列を使用すると、マップから各マーカーを削除できます。コード内のコメントを見てください。 ;）

var customLabel = { 
 
    restaurant: { 
 
    label: 'R' 
 
    }, 
 
    bar: { 
 
    label: 'B' 
 
    } 
 
}; 
 
var map; 
 
var markers; 
 
var point; 
 
var xml; 
 
var markerArr = []; // NEW ARRAY 
 

 
function initMap() {     
 
    map = new google.maps.Map(document.getElementById('map'), {      
 
    center: new google.maps.LatLng(-33.863276, 151.207977), 
 
    zoom: 12   
 
    });  
 

 
} 
 

 
function drop() { 
 
    var infoWindow = new google.maps.InfoWindow; 
 
    downloadUrl('https://storage.googleapis.com/mapsdevsite/json/mapmarkers2.xml', function(data) { 
 
    xml = data.responseXML; 
 
    markers = xml.documentElement.getElementsByTagName('marker'); 
 
    Array.prototype.forEach.call(markers, function(markerElem) { 
 
     var id = markerElem.getAttribute('id'); 
 
     var name = markerElem.getAttribute('name'); 
 
     var address = markerElem.getAttribute('address'); 
 
     var type = markerElem.getAttribute('type'); 
 
     point = new google.maps.LatLng(
 
     parseFloat(markerElem.getAttribute('lat')), 
 
     parseFloat(markerElem.getAttribute('lng'))); 
 

 
     var infowincontent = document.createElement('div'); 
 
     var strong = document.createElement('strong'); 
 
     strong.textContent = name 
 
     infowincontent.appendChild(strong); 
 
     infowincontent.appendChild(document.createElement('br')); 
 

 
     var text = document.createElement('text'); 
 
     text.textContent = address 
 
     infowincontent.appendChild(text); 
 
     var icon = customLabel[type] || {}; 
 
     marker = new google.maps.Marker({ 
 
     map: map, 
 
     position: point, 
 
     animation: google.maps.Animation.DROP 
 
     }); 
 
     marker.addListener('click', function() { 
 
     infoWindow.setContent(infowincontent); 
 
     infoWindow.open(map, marker); 
 
     }); 
 
     markerArr.push(marker); // PUSH EACH MARKER INTO AN ARRAY 
 
    }); 
 

 
    }); 
 
} 
 

 
function clearMarkers() { 
 
    for (var i = 0; i < markerArr.length; i++) { 
 
    markerArr[i].setMap(null); // REMOVE EACH MARKER 
 
    } 
 
} 
 

 
function downloadUrl(url, callback) { 
 
    var request = window.ActiveXObject ? 
 
     new ActiveXObject('Microsoft.XMLHTTP') : 
 
    new XMLHttpRequest; 
 

 
    request.onreadystatechange = function() { 
 
    if (request.readyState == 4) { 
 
     request.onreadystatechange = doNothing; 
 
     callback(request, request.status); 
 
    } 
 
    }; 
 

 
    request.open('GET', url, true); 
 
    request.send(null); 
 
} 
 

 
function doNothing() {}

/* Always set the map height explicitly to define the size of the div 
 
* element that contains the map. */ 
 

 
#map { 
 
    height: 100%; 
 
} 
 

 

 
/* Optional: Makes the sample page fill the window. */ 
 

 
html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<div id="floating-panel"> 
 
    <button id="drop" onclick="drop()">Drop Markers</button> 
 
    <button id="clearMarkers" onclick="clearMarkers()">clear Markers</button> 
 
</div> 
 
<div id="map"></div> 
 
<!-- Replace the value of the key parameter with your own API key. --> 
 
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>