Last active
October 6, 2018 16:36
-
-
Save jerry-maheswara-github/f506a7ac850cfdf6b024f6710a8616e6 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div id="map-canvas" style="height: 400px;"></div> | |
<input type="button" value="Reload markers" id="reloadMarkers"> | |
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&key=[YOURKEY]"></script> | |
<script> | |
var map; | |
var markers = []; // Create a marker array to hold your markers | |
var beaches = [ | |
['Bondi Beach', 10, 10, 4], | |
['Coogee Beach', 10, 11, 5], | |
['Cronulla Beach', 10, 12, 3], | |
['Manly Beach', 10, 13, 2], | |
['Maroubra Beach', 10, 14, 1] | |
]; | |
function setMarkers(locations) { | |
for (var i = 0; i < locations.length; i++) { | |
var beach = locations[i]; | |
var myLatLng = new google.maps.LatLng(beach[1], beach[2]); | |
var marker = new google.maps.Marker({ | |
position: myLatLng, | |
map: map, | |
animation: google.maps.Animation.DROP, | |
title: beach[0], | |
zIndex: beach[3] | |
}); | |
// Push marker to markers array | |
markers.push(marker); | |
} | |
} | |
function reloadMarkers() { | |
// Loop through markers and set map to null for each | |
for (var i=0; i<markers.length; i++) { | |
markers[i].setMap(null); | |
} | |
// Reset the markers array | |
markers = []; | |
// Call set markers to re-add markers | |
setMarkers(beaches); | |
} | |
function initialize() { | |
var mapOptions = { | |
zoom: 5, | |
center: new google.maps.LatLng(10,12), | |
mapTypeId: google.maps.MapTypeId.SATELLITE | |
} | |
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); | |
setMarkers(beaches); | |
// Bind event listener on button to reload markers | |
document.getElementById('reloadMarkers').addEventListener('click', reloadMarkers); | |
} | |
initialize(); | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment