In this short article I will explain how to delete / remove / clear all markers present on map on Button click in Google Maps V3.
 
Following is the HTML Markup containing the Google Map implementation. To add markers you will need to click on the map. These markers are added to a JavaScript array.
Note: To know more about please refer my article Google Maps V3: Add (Create) markers on click of Google Maps.
 
Below the map, there’s an HTML button which when clicked triggers the DeleteMarkers JavaScript function. Inside this function a loop is executed over the array of markers and each marker is removed from the Map.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"></script>
<script type="text/javascript">
    var markers = [];
    window.onload = function () {
        var mapOptions = {
            center: new google.maps.LatLng(21.0000, 78.0000),
            zoom: 5,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
 
        //Attach click event handler to the map.
        google.maps.event.addListener(map, 'click', function (e) {
 
            //Determine the location where the user has clicked.
            var location = e.latLng;
 
            //Create a marker and placed it on the map.
            var marker = new google.maps.Marker({
                position: location,
                map: map
            });
 
            //Attach click event handler to the marker.
            google.maps.event.addListener(marker, "click", function (e) {
                var infoWindow = new google.maps.InfoWindow({
                    content: 'Latitude: ' + location.lat() + '<br />Longitude: ' + location.lng()
                });
                infoWindow.open(map, marker);
            });
 
            //Add marker to the array.
            markers.push(marker);
        });
    };
    function DeleteMarkers() {
        //Loop through all the markers and remove
        for (var i = 0; i < markers.length; i++) {
            markers[i].setMap(null);
        }
        markers = [];
    };
</script>
</head>
<body>
<div id="dvMap" style="width: 500px; height: 500px">
</div>
<br />
<input type="button" value="Delete" onclick="DeleteMarkers()" />
</body>
</html>
 
Google Maps V3: Delete all markers - Remove all markers - Clear all markers
 
Demo
View Demo
 
Downloads
Download Code