Google Maps V3 Javascript Works Only In Chrome?

I wrote a script that first geocodes an address and then displays a map of that address. The trouble is, it only works in Chrome / Chromium. Other browsers (Firefox 10 & IE9) d

Solution 1:

This doesn't look good:

resizeStop: function(event) { google.maps.event.trigger(that.element, 'resize'); },
open: function(event) { google.maps.event.trigger(that.element, 'resize'); }

you trigger the resize-event on the element that contains the map(that.element), but you must trigger resize on the google.maps.Map-object (what should be that.map in this case)

Solution 2:

Wow... Here was the issue.

The layout that I built was a fluid layout. So, one of the first CSS rules that I have written was:

img, div { max-width: 100%; }

So that divs and images can scale. Well, for whatever reason, Google maps DOES NOT like this rule with the end result being a grey box.

And so I added another rule - an exception for Google maps:

img.no_fluid, div.no_fluid { max-width: none; }

And then, in javascript:

// AFTER DIALOG CREATION
$(dialog).find('*').addClass("no_fluid");

The find('*') will get us all the descendants.

Viola!