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
<[email protected]> wrote:
> 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
>
> <[email protected]> wrote:
> > 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
>
> > On Feb 9, 6:00 am, Lawrence <[email protected]> wrote:
>
> > > 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
--
You received this message because you are subscribed to the Google Groups
"Google Maps JavaScript API v3" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-maps-js-api-v3?hl=en.
