Google Map Event listener - google-maps

Question

I have a problem in event listener. I created 'click' event listener in 'map', every time the user clicks on the map a new marker is created. Each marker has it's own infobox that contains a link to remove the marker.
The problem is when i click the remove link inside the infobox, the map's click event is always triggered. The marker is successfully removed but the it creates a new marker. How can i fix this? I just want to remove the marker.
here's the code:
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=123456778&sensor=true"></script>
<script type="text/javascript" src="infobox.js"></script>
<script type="text/javascript">
var map;
var markers = [];
var infowindows = [];
var marker_cnt = 0;
var marker_icons = { 'mall' : 'mall.png', 'train_station': 'train.png','park' : 'park.png', 'bank':'bank.png'};
var infoWindow;
var places = [
['Central','mall',1.2892612468505713,103.84759068489075,'central mall'] ,
['Dhoby Ghaut','train_station',1.298550049775337,103.84589552879333,'Dhoby Ghaut'] ,
['Outram Station', 'train_station',1.2812595487889478, 103.83896470069885,'Outram Station'],
['City Hall', 'bank', 1.2932084559435784, 103.85241866111755,'City Hall Station'],
['Little India Station', 'train_station', 1.3071308997488136, 103.84971499443054,'Little India Station'],
['Emily Park', 'park', 1.3071308997488136, 103.84971499443054,'Emily Park']
];
var myOptions = {
content: 'loading...'
,boxStyle: {
background: "#ccc"
,opacity: 1
,width: "280px"
,height: "100px"
,padding: "10px"
}
,closeBoxMargin: "10px 2px 2px 2px"
,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
,pane: "floatPane"
,enableEventPropagation: false
};
var infowindow = new InfoBox(myOptions);
google.maps.event.addListener(infowindow, 'click', function () {
console.log('aaaa');
});
function initialize()
{
var myLatlng = new google.maps.LatLng(1.2892826990902386,103.84409308433533);
var myOptions = {
zoom: 16,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, 'click', function(event){
placeMarker(event.latLng,event.getPosition);
});
loadMarkers();
}
function loadMarkers()
{
for(var i = 0 ; i < places.length; i++)
{
var spot = places[i];
var spot_latlng = new google.maps.LatLng(spot[2],spot[3]) ;
var marker = new google.maps.Marker({
map:map,
draggable:false,
position: spot_latlng,
title: spot[0],
icon: marker_icons[spot[1]],
html: '<h1>'+spot[4]+'</h1> website '
});
markers.push(marker);
google.maps.event.addListener(marker, 'click', function () {
infowindow.setContent(this.html);
infowindow.open(map, this);
});
}
}
function unloadMarkers()
{
for(var i = 0; i < markers.length; i++)
{
markers[i].setMap(null);
}
}
function setMapCenter(index)
{
var spot = places[index];
var spot_latlng = new google.maps.LatLng(spot[2],spot[3]);
infowindow.setContent(markers[index].html = spot[4]);
infowindow.open(map, markers[index]);
map.setCenter(spot_latlng);
}
function placeMarker(location,position)
{
marker = new google.maps.Marker({
map:map,
draggable:true,
animation: google.maps.Animation.DROP,
position: location,
html: 'delete marker <br/> '+ location
});
markers.push(marker);
google.maps.event.addListener(marker, 'click', function () {
infowindow.setContent(this.html);
infowindow.open(map, this);
});
google.maps.event.addListener(marker,'dragend',function(){
var html_content = 'delete marker <br/>'+ this.position;
this.html=html_content;
infowindow.setContent(this.html);
infowindow.open(map,this);
});
google.maps.event.addListener(marker,'dragstart',function(){
infowindow.close(map,this);
});
}
function removeMarker(index)
{
markers[index].setMap(null);
infowindow.close(map, markers[index]);
infowindows[index].close();
return false;
}
</script>
<style type="text/css">
html{
font:12px Arial, Helvetica, sans-serif;
color:#333;
padding:0;
margin:0;
}
.listmenu{
height:300px;
}
.listmenu ul {
margin: 0 0 5px 0;
padding: 0 0 2px 0;
list-style-type: none;
width:185px;
}
.listmenu li a {
color: #333;
display: block;
height: 16px;
padding: 4px 0 4px 14px;
text-decoration: none;
font-weight:bold;
background-color:#fff;
}
.listmenu li a:hover {
background-color: #666;
color:#fff;
}
</style>
<body onload="initialize()">
<div id="map_canvas" style="width:1000px; height:300px; border: 3px solid #666"></div>

Answer 1

pass the click-event as argument to removeMarker()
marker = new google.maps.Marker({
map:map,
draggable:true,
animation: google.maps.Animation.DROP,
position: location,
html: '<a href="#" onclick="removeMarker('+ (markers.length) +',event)">\
delete marker</a> <br/> '+ location
});
Then you'll be able to stop the propagation of the event:
function removeMarker(index,event)
{
try{event.cancelBubble=true;}//IE
catch(e){event.stopPropagation();}//others
markers[index].setMap(null);
infowindow.close(map, markers[index]);
return false;
}

Answer 2

Thanks for the reply. I already solved this problem. I fixed it by removing "onclick" and placing javascript to href <a href='javascript: removeMarker(index)'> remove </a>