Maps API v3 Delete marker from infowindow

by upsidown

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map-canvas"></div>

CSS

#map-canvas {
    height: 500px;
    width: 500px;
}

JavaScript

var map
var infowindow = new google.maps.InfoWindow();
var markers = [];
var counter = 0;

function initialize() {
    
    var NY = new google.maps.LatLng(40.739112, -73.785848);
    map = new google.maps.Map(
        document.getElementById('map-canvas'), {
        center: NY,
        zoom: 16,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    google.maps.event.addListener(map, 'click', function (event) {
        
        addMarker(event.latLng);
    });
    
    google.maps.event.addListener(infowindow, 'domready', function () {
        
        $("#deleteButton").click(function() {

            deleteMarker($(this).data('id'));
        });
    });
}

function addMarker(location) {
    
    counter++;
    
    var marker = new google.maps.Marker({
        position: location,
        map: map,
        id: counter
    });
    
    markers.push(marker);

    var deleteButton = '<button id="deleteButton" data-id="' + counter + '">Delete</button>';

    google.maps.event.addListener(marker, 'rightclick', function () {
        infowindow.setContent(deleteButton);
        infowindow.open(map, marker);
    });
}

function deleteMarker(markerId) {
 
    for (var i=0; i<markers.length; i++) {
        
        if (markers[i].id === markerId) {

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


initialize();