How to remove all markers in google map (with XML file)
I am trying to remove all markers on my map.
I tried to use:
marker.setMap(null)
But it only removes one marker.
How do I remove all markers on the map?
Here is my code: https://jsfiddle.net/j027mww1/67/
+3
source to share
1 answer
The problem is that your marker variable only stores the last marker.
You need to push the marker into the array. using this array you will be able to remove every marker from your map. Take a look at the comments inside the code.;)
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>
+3
source to share