Maps API v3 Add and remove markers

http://stackoverflow.com/questions/28413791

by grant

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map-canvas"></div>
<button id="add-markers">Add markers</button>
<button id="remove-markers">Remove markers</button>

CSS

#map-canvas {
    height: 350px;
    margin-bottom: 10px;
}

JavaScript

var map;
var markers = [];

function initialize() {

    var mapOptions = {
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: new google.maps.LatLng(44.76522, -116.35002)
    };

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    google.maps.event.addDomListener(document.getElementById('add-markers'), 'click', addMarkers);
    google.maps.event.addDomListener(document.getElementById('remove-markers'), 'click', removeMarkers);
}

function addMarkers() {

    var coords = [
    new google.maps.LatLng(44.32522, -116.07002),
    new google.maps.LatLng(44.45522, -116.12002),
    new google.maps.LatLng(44.86522, -116.35002),
    new google.maps.LatLng(44.77522, -116.88002)];

    for (var i = 0; i < coords.length; i++) {

        var marker = new google.maps.Marker({
            map: map,
            position: coords[i]
        });

        markers.push(marker);
    }
}

function removeMarkers() {

    for (var i = 0; i < markers.length; i++) {

        markers[i].setMap(null);
    }
}

initialize();