Google Maps API--Can't get info window data to load properly

Question

I have this code that generates markets I want to be clickable with a pop up info window.

for (i = 0; i < marker_array.length; i++) {
    var point = new GLatLng(marker_array[i][0], marker_array[i][1]);
    var marker = new GMarker(point, markerOptions);

    GEvent.addListener(marker, "click", function() {
        marker.openInfoWindowHtml(html_data);
        });
    map.addOverlay(marker);
    }

The problem is that only one market ends up clickable. No matter which one gets clicked, an info window with the one clickable marker's data pops up over that one clickable marker. All of the markers load and are in the correct locations, so the problem is only with getting the pop up window data to appear for each one.

I've checked out the section about "unrolling" the marker function here and it seems like that's probably where I'm going wrong, but I have not been able to get this to work through testing the changes they suggest.

Answer 1

I'm not quite sure if I follow, but are you saying that all popups have the same data in them?

I think that this is the problem, and that's because the way the event listeners work. When the click function happens it evaluates the listener event. So the HTML you're showing is always the same, as the variable is always being re-written to.

Answer 2

I used an array that matches my marker data for my HTML and it works well:

function createMarker(posn, title, icon, i) {
    var marker = new GMarker(posn, {title: title, icon: icon, draggable:false});
    GEvent.addListener(marker, 'mouseover', function() { 
        map.closeInfoWindow()
        marker.openInfoWindowHtml(infoText[i])

     } );   
    return marker;
}

Answer 3

I believe your problem is that the variable html_data is the same for all iterations of this loop. You should update that variable each go-through in the loop for the values to be different.

Answer 4

I found the same case, and i have a solution for this problem. I suggest you to create a custom class extending Marker class. In this custom class, you should make a constructor that have a parameter(s) for your data, and this class should also have its own info window variable that will be called from your main application. For example:

The custom class:

public class StoreSpot extends Marker
{  
    public var infoWindow:InfoWindowOptions;
    public var store_id:String;
    public var address:String;
    public var name:String;
    ...
}

The main application:

tempMarker = new StoreSpot(
    tempLatlng,
    new MarkerOptions({
        icon:new spotStore(), 
        iconAlignment:MarkerOptions.ALIGN_HORIZONTAL_CENTER,
        iconOffset:new Point(0,-50)
    }),
    temp.store_id,
    temp.name,
    temp.address,
    temp.detail
);

This way you can place different info window for different marker. Hope this works for you. Enter code here.