Maps API v3 Reload markers

http://stackoverflow.com/questions/22773651

by Damith Nuwan Sampath

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places"></script>
<div id="map-canvas"></div>
<input type="button" value="Reload markers" id="reloadMarkers">

CSS

#map-canvas {
    height: 400px;
}

JavaScript

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();