var map; var markersArray = []; function initialize() { map = new google.maps.Map(document.getElementById("map"), { zoom: 7, center: new google.maps.LatLng(22.7964,79.5410), mapTypeId: google.maps.MapTypeId.ROADMAP }); 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); } function clearOverlays() { if (markersArray) { for (i in markersArray) { markersArray[i].setMap(null); } } } function showOverlays() { if (markersArray) { for (i in markersArray) { markersArray[i].setMap(map); } } } function deleteOverlays() { if (markersArray) { for (i in markersArray) { markersArray[i].setMap(null); } markersArray.length = 0; } }
<html> <head> <title>Google Maps JavaScript API v3 Example: Overlay Removal & Deletion</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> </script> </head> <body onload="initialize()"> <div align="center" style="width: 530px; height: 35px"> <input onclick="clearOverlays();" type=button value="Clear Overlays"/> <input onclick="showOverlays();" type=button value="Show All Overlays"/> <input onclick="deleteOverlays();" type=button value="Delete Overlays"/> </div> <div id="map" style="width:530px; height:195px"> </div> </body> </html>