I have a page that displays a list of locations chosen by the user, and for each location it also shows the map with a marker pointing to the address.
Everything works fine in firefox and opera, but in safari, chrome and ie the controls (zoom, move, the map options, the scale) are only displayed in one or two maps on the page (usually only the last map). For the others, there's just an image of the map with the marker (and I also can't move the map by dragging it, it's just like a static image).
I checked and it is not a z-index (or another type of css) problem, the controls are not hidden. The div which is supposed to hold the controls is empty.
The code for each map is something like this:
var map_x = null;
if (GBrowserIsCompatible()) {
var mapObjx = document.getElementById("mapx");
if (mapObjx != "undefined" && mapObjx != null) {
map_x = new GMap2(document.getElementById("mapx"));
map_x.setCenter(new GLatLng(40.728444, -73.992117), 14, G_NORMAL_MAP);
map_x.addControl(new GLargeMapControl());
map_x.addControl(new GMapTypeControl());
var point = new GLatLng(40.7284440,-73.9921169);
var marker = createMarker(point,"","<div id=\"gmapmarker\"><\/div>", 0,"");
map_x.addOverlay(marker);
}
} else {
alert("Sorry, the Google Maps API is not compatible with this browser.");
}
where x (in map_x, mapObjx and mapx) is a unique number for each map.
I have tried a lot of things, it seems that causing a slight delay in the code before each new map is added is improving the number of working maps, but never past 3 or 4 (also, this is not really a solution, since there could be many maps on the page, and this would cause it to load too slowly).
As I've said, it only works in firefox and opera. Does anybody have any ideas I could try?