Home
Run >
<!DOCTYPE html> <html> <head> <!-- www.techstrikers.com --> <title>Remove Markers</title> <style> html, body { height: 100%; margin: 0; padding: 0; } #map { height: 99%; width: 99%; } #panel { position: absolute; top: 0px; left: 25%; z-index: 5; padding: 0px; border: 0px solid #999; text-align: center; } #panel, .panel { font-family: 'Roboto','sans-serif'; line-height: 30px; padding-left: 10px; } #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: 17.08672, lng: 78.42444}; map = new google.maps.Map(document.getElementById('map'), { zoom: 7, center: lat_lng, mapTypeId: google.maps.MapTypeId.TERRAIN }); // Adds a marker at the center of the map. 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); } // Sets the map on all markers in the array. function setMapOnAll(map) { for (var i = 0; i < markers.length; i++) { markers[i].setMap(map); } } // Removes the markers from the map, but keeps them in the array. function clearMarkers() { setMapOnAll(null); } // Shows any markers currently in the array. function showMarkers() { setMapOnAll(map); } // Deletes all markers in the array by removing references to them. function deleteMarkers() { clearMarkers(); markers = []; } </script> </head> <body> <div id="panel"> <input onclick="deleteMarkers();" type=button value="Delete Markers"> </div> <div id="map"></div> <p>Click on the map to add markers.</p> </body> </html>