Skip to content

Instantly share code, notes, and snippets.

@jerry-maheswara-github
Last active October 6, 2018 16:36
Show Gist options
  • Save jerry-maheswara-github/f506a7ac850cfdf6b024f6710a8616e6 to your computer and use it in GitHub Desktop.
Save jerry-maheswara-github/f506a7ac850cfdf6b024f6710a8616e6 to your computer and use it in GitHub Desktop.
<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