Google Maps API. The information window data cannot be loaded correctly.
I have this code that generates the markets that I want to go to with an info box popup.
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 gets clickable. No matter which click is clicked, a one-click information box pops up the marker data above one clickable marker. All markers are loaded and in the correct places, so the only problem is to display popups for each one.
I've checked the section on "expanding" the marker function here and it looks like I'm probably wrong, but I haven't been able to get this to work by checking the changes they suggest.
source to share
I'm not really sure if I am following, but are you saying that all popups have the same data in them?
I think this is a problem, and because this is how event listeners work. When the click function occurs, it evaluates the listener event. This way the HTML you show is always the same as the variable is always being rewritten.
source to share
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;
}
source to share
I found the same case and I have a solution to this problem. I suggest that you create a custom class that extends the Marker class. In this custom class, you must create a constructor that has parameters for your data, and this class must also have its own info window variable that will be called from your main application. For example:
Custom class:
public class StoreSpot extends Marker
{
public var infoWindow:InfoWindowOptions;
public var store_id:String;
public var address:String;
public var name:String;
...
}
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 a different info window for different markers. Hope this works for you. Enter the code here.
source to share