problem with openInfoWindowHtml for multiple points using events

Question

I am a beginner and using openInfoWindowHtml to show the balloon text. my application has an option to show single location and multiple location.

My single location balloon text works fine using openInfoWindowHtml();

But when i go in for multiple, it always shows the last points text and the click event for all the points never happens.

code snippet:

var markers =[];

for(var i=0;i<(geoList.length)-1;i++)
{
    var geo = (geoList[i]).split(',');
    map.setCenter(new GLatLng(geo[3], geo[4]), 2);
    var ip_point = new GLatLng(geo[3], geo[4]);

    //creating a marker 
    marker = new GMarker(ip_point);
    map.addOverlay(marker);
    markers[i] = marker;

    // The ballon text which shows the details of the ip address

    var ip = "<div style=\"font-family:Verdana;font-size:10px;text-align:left\">";
    //var dbName = base64_decode(geo[5]); // added on 14Dec2009
    //If IP is not found it goes to else loop           
    if(geo.length== 9){
        ip += "<span class=\"FSColorBold\">"+geo[5]+"</span><br /> ";
        ip += "<?php __('IP:'); ?>"+geo[6]+"<br />";
        ip += "<?php __('ID:'); ?>"+geo[7]+"<br />";
        ip += "<?php __('Last Accessed: '); ?>"+geo[8]+"<br />";
        ip += geo[2]+","+geo[1]+"<br />";
    }
} 

// shows IP details info by default         
map.openInfoWindow(map.getCenter(),ip);

// Reloads the IP details info on clicking the marker 

GEvent.addListener(marker, "click", function(){
    marker.openInfoWindowHtml(ip+'');});

The points are in a loop and the event listeners are outside the loop.

Can anyone tell me exactly what went wrong?

Answer 1

You are only associating the click event with the last marker. You need call GEvent.addListener for each marker that you are adding to the map.

You also need to make sure that when the event is fired the marker in the callback is the marker that you associated with the event. You can do that by moving your marker creation code into a separate function (takes advantage of Javascript Closures to ensure the marker in the callback is the marker in scope in the outer function).

Check out this example based on your sample (code).