Web Tutorials

Interview Q & A

Code Examples

Utility Tools

Remove Multiple Markers from Google Maps

In this section you will learn how multiple markers are removed from google map with complete example.

Here you can view the output of the example and you can also "try it yourself" by clicking on "Live Demo" button given at the bottom.

Syntax

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

Remove Multiple Markers from Google Maps Example

<!DOCTYPE html>    
<html>    
  <head><!-- www.techstrikers.com -->    
    <title>Add Multiple Markers in Google Map</title>    
    <style>    
      html, body {    
        height: 100%;    
        margin: 0;    
        padding: 0;    
      }    
      #map {    
        height: 99%;   
        width: 99%;   
      }    
#panel {    
  position: absolute;    
  top: 10px;    
  left: 25%;    
  z-index: 5;    
  background-color: #fff;    
  padding: 0px;    
  border: 1px solid #999;    
  text-align: center;    
}    
#panel, .panel {    
  font-family: 'Roboto','sans-serif';    
  line-height: 0px;    
  padding-left: 0px;    
}    
#panel select, #panel input, .panel select, .panel input {    
  font-size: 15px;    
}    
#panel select, .panel select {    
  width: 100%;    
}    
#panel i, .panel i {    
  font-size: 12px;    
}    
</style>    
<script async defer    
src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=initMap"></script>    
<script>    
var map;    
var markers = [];    
    
function initMap() {    
  var lat_lng = {lat:22.08672, lng: 78.42444};    
 var markersLatLng=     
[{lat:23.67502, lng:76.2533},    
{lat:22.17754, lng:76.38519},    
{lat:21.38179, lng:82.6034},    
{lat:22.0757, lng:79.1537},    
{lat:23.8961, lng:82.4276},    
{lat:24.9365, lng:78.9559},    
{lat:22.11649, lng:85.8114}];    
 var markers = [];  
  map = new google.maps.Map(document.getElementById('map'), {    
    zoom: 5,    
    center: lat_lng,    
    mapTypeId: google.maps.MapTypeId.TERRAIN    
  });    
    
  // Adds a marker at the center of the map.    
  for (var i = 0; i < markersLatLng.length; i++) {    
   var lat_lng = new google.maps.LatLng(markersLatLng[i].lat,markersLatLng[i].lng);  
    addMarker(lat_lng);  
}       
}    
    
// 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);
}   
  
// Removes the markers from the map, but keeps them in the array.    
function deleteMarkers() {
  for (var i = 0; i < markers.length; i++ ) {
    markers[i].setMap(null);
  }
  markers.length = 0;
}   
   
</script>         
</head>    
  <body>  
<div id="panel">      
      <input onclick="deleteMarkers();" type=button value="Delete Markers">    
    </div>     
    <div id="map"></div>     
  </body>    
</html> 

Above example will produce following output