Tutorial :Controls are not working when I have several google maps on one page (in chrome, safari and ie)


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?


Well, this feels silly. The external scripts included on the page are generated by php, and the script from maps.google.com was included twice. After I corrected this, everything seems to work fine in all browsers.

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »