Google maps api: force map to do not handle click inside infobox

Question

In my app user create marker when he click by map. So code like this:

function placeMarker(map, location) {
     var marker = new google.maps.Marker({
         position: location,
         map: map
     //other...
     var infowindow = new google.maps.InfoWindow({
         content: ballon.get(0)
     });

     ballon.find("#delete-btn").click(function(){
        infowindow.close();
        $mapPreview.data("markers")[id].marker.setMap(null);
        delete $this.data("markers")[id];
     });
});

"#delete-btn" is inside infowindow . Problem is when user click on "#delete-btn" he also create new marker on map. How can I avoid this?

Answer 1

baloon.find("#delete-btn").click(function(e){
    e.stopPropagation();

Pass the event variable through to the click function (e) , and then stop the event propagation using e.stopPropagation()

This will stop the event from bubbling up through the DOM and getting picked up by various other listeners, like those on the map.