How to avoid double click on a marker in google map?

Question

I created a pop up box.When I single click on a marker on google map. The popup shows with a cancel button.Clicking on cancel button just hide this popup box.My problem is when I double clicked on this marker the popup boxes are generating and overlap one by one.So Cancel is not working. How to avoid this ?

Sample Code:

makeInfoWindowEvent(map, marker); 

function makeInfoWindowEvent(map, marker) {
    google.maps.event.addListener(marker, 'click', function() {

        var markerPopup = document.createElement("div");
        markerPopup.id = 'markerPopup';
        markerPopup.className = 'markerPopup';
        markerPopup.innerHTML = "This is a test message";

        var cancel = document.createElement("div");
        cancel.id = 'cancel';
        cancel.className = 'cancel';

        markerPopup.appendChild(cancel);
        cancel.onclick= function () {
            var divbg = document.getElementById('markerPopup'); 
            divbg.style.visibility = "hidden";           
        }
        document.getElementById('map-canvas').appendChild(markerPopup);

    });
}

Answer 1

The events won't fire at the same time, so you can check for the presence of a markerPopup and return early if it is already there.

if (document.getElementById("markerPopup")) {
    // they must have double clicked, so do nothing
    return;
}

If you need more than one popup on the map at a time, then you will need to assign unique ids to each one that get created. You could then attach those ids as a property on the button, which would give a way to know which one to kill.