V3 - Marker add listener only gives back last marker in list

Lawrence

unread,

Feb 9, 2010, 7:00:38 AM2/9/10

to Google Maps JavaScript API v3

Hi,

The following code is simple and uses Fluster clusterer for V3 but
this does not change the problem I am having. Out of 20 markers with
listener I only get back the final #19 infoWindow marker for every
mouse click.

I probably just can't see the mistake I am making. I have included the
complete test example.

=============================

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>MapV3-TEST 2</title>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false&key=ABQIAAAAeMlT-
q_MPMuAPVRACx8wMBTDpjK6HkeMU41AmSpLNDItnIYiyRQgFFe4Ed-3B4n-
M5EzX1fSXY-7zg"></script>
<script type="text/javascript" src="../js/nimblecat/gmap/
Fluster2.packed.js"></script>
<script type="text/javascript"><!--

function initialize() {
var latlng = new google.maps.LatLng(33.82, -118.15);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map;
var fluster;

try {
map = new
google.maps.Map(document.getElementById("map_canvas"), myOptions);
fluster = new Fluster2(map);
} catch (ex) {
alert("ERROR: initializing map or fluster == " +
ex.description);
}

var lat = map.getCenter().lat();
var lng = map.getCenter().lng();

var markerCount = 20;

for(var i = 0; i < markerCount; i++) {
var pos = [
lat + (0.5 * Math.random()),
lng + (0.5 * Math.random())
];

var latlng = new google.maps.LatLng(pos[0], pos[1]);

var marker = new google.maps.Marker( {
position: latlng,
map: map,
title: 'Marker ' + i });

var info = new google.maps.InfoWindow({
content: 'This is some <b>info</b> text ' + i,
position: latlng
});

google.maps.event.addListener(marker, 'click', function() {
info.open(map, marker);
});

fluster.addMarker(marker);

} // end of loop

fluster.styles = {
// This style will be used for clusters with more than 0
markers
0: {
image: 'http://gmaps-utility-library.googlecode.com/
svn/trunk/markerclusterer/1.0/images/m1.png',
textColor: '#FFFFFF',
width: 53,
height: 52
},
// This style will be used for clusters with more than
10 markers
10: {
image: 'http://gmaps-utility-library.googlecode.com/
svn/trunk/markerclusterer/1.0/images/m2.png',
textColor: '#FFFFFF',
width: 56,
height: 55
},
20: {
image: 'http://gmaps-utility-library.googlecode.com/
svn/trunk/markerclusterer/1.0/images/m3.png',
textColor: '#FFFFFF',
width: 66,
height: 65
}
};

fluster.initialize();
}

--></script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 80%; height: 80%"></div>
</body>

</html>

=============================

Any help is appreciated,
Lawrence

Chad Killingsworth

unread,

Feb 9, 2010, 10:08:37 AM2/9/10

to Google Maps JavaScript API v3

Couple of generic notes:

1) Please include a live link to your site. It's difficult to debug
code posted to the group.
2) You are using a key in your script tag that includes the API. The
v3 API does not use keys.

Now to your particular issue. Try the following code snippet:

var info = new google.maps.InfoWindow({
content: 'This is some <b>info</b> text ' + i,
position: latlng
});

google.maps.event.addListener(marker, 'click', function() {
info.open(map, this);
});

Good luck,

Chad Killingsworth

unread,

Feb 9, 2010, 10:18:38 AM2/9/10

to Google Maps JavaScript API v3

I misread your issue - the above code alone won't fix the issue.

The way I address your issue is to attach a new property to the
marker. This has the risk that if the Marker object ever defines that
property, you will just have overwritten it.

Here's the augmented code:

marker.infoWindow = new google.maps.InfoWindow({

content: 'This is some <b>info</b> text ' + i,
position: latlng
});

google.maps.event.addListener(marker, 'click', function() {
this.infoWindow.open(map, this);
});

Chad Killingsworth

On Feb 9, 9:08 am, Chad Killingsworth

Daniel Lee

unread,

Feb 9, 2010, 6:46:58 PM2/9/10

to Google Maps JavaScript API v3

Lawrence, you're running into a common issue when referencing
variables inside a closure function defined within a loop. The part
I'm referring to is this:

google.maps.event.addListener(marker, 'click', function() {
info.open(map, marker);
});

The 'marker' variable inside the closure function is holding a
reference to object that was last assigned to it. When it is executed
at run-time, the last Marker object is what is being passed into
info.open().

The way to fix this problem is to pass in the Marker object into a
function which returns a function which acts as the event handler and
will get called when the 'click' event is fired.

For example:

// In the global namespace
function handleMarkerClick(marker, index) {
return function() {
infoWindow.setContent('Marker #' + index);
infoWindow.open(map, marker);
};
}

// Inside your loop
google.maps.event.addListener(marker, 'click',
handleMarkerClick(marker, n));

A shorthand way of doing this without defining an explicit function
outside the loop would look like this:
google.maps.event.addListener(marker, 'click', (function(markerArg,
index) {
return function() {
infoWindow.setContent('Marker #' + index);
infoWindow.open(map, m);
};
})(marker, n));

Here's an example I quickly put together:
http://geoapis.appspot.com/agdnZW9hcGlzchILEgtFeGFtcGxlQ29kZRjSDww

Hope this helps,

Dann
On Feb 9, 7:18 am, Chad Killingsworth