Google Maps V3 JavaScript works only in Chrome?

Question

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) display a grey box. A problem that could be related, if I add a marker to the map, the marker does not show in Chrome.

I know that :

I connect with the API successfully with my API key.
The address is properly geocoded.
I use jQuery UI dialog to display the map. This, however, does not seem to be a problem. Removing the dialog and using a static div creates the same "grey box" result.

Below is my script, how I invoke it, and the website that I am using this on.

Here's the script:

function Map(properties)
{
  var that      = this;

  // the HTML div
  this.element  = properties.element;
  // address string to geocode
  this.address  = properties.address;
  // title to use on the map and on the jQuery dialog
  this.title    = properties.title;

  this.latlng   = null;
  this.map      = null;
  this.markers  = [];

  // geocode address and callback
  new google.maps.Geocoder().geocode({'address': this.address}, function(data)
  {
    // geocoded latitude / longitude object
    that.latlng = data[0].geometry.location;
    // map options
    var options =
    {
      zoom: 16,
      center: that.latlng,
      zoomControl: false,
      streetViewControl: false,
      mapTypeControl: false,
      mapTypeId: google.maps.MapTypeId.ROADMAP
     };
     // create a map
     that.map = new google.maps.Map(that.element, options);
     // add a marker
     that.markers.push(new google.maps.Marker({map: that.map,
                                               position: that.latlng,
                                               title: that.title + "\n" +
                                               that.address}));
  });
  this.get_google_map = function()
  {
    return that.map;
  }
  // creates a jQuery UI dialog with a map
  this.show_in_dialog = function()
  {
    // because the dialog can resize, we need to inform the map about this
    $(that.element).dialog({ width: 400, height: 300, title: that.title,
    resizeStop: function(event) 
    { 
      google.maps.event.trigger(that.map, 'resize'); 
    },
    open: function(event) 
    { 
      google.maps.event.trigger(that.map, 'resize'); 
    }});
  }
  this.center = function()
  {
    that.map.setCenter(that.latlng);
  }
}

Here's how I invoke it :

// grab the address via HTML5 attribute
var address     = $("#address").attr("data-address");
// ... and the title
var title       = $("#address").attr("data-title") + " Map";
var map_element = document.createElement('div');

// append the newly created element to the body
$("body").append(map_element);

// create my own map object
var map         = new Map({ element : map_element, 
                            address : address, 
                            title : title });

// bind a link to show the map
$("#map_link").click(function()
{
  map.center();
  map.show_in_dialog();
  return false;
});

And here's the URL of the problem (click on map): http://testing.fordservicecoupons.com/dealer/30000/premium_coupon_page

Last but not least, I combine and obfuscate my JavaScripts, so what you see above is not exactly the same as in the source on the website.

Your obfuscation does no-one any favours. I suspect that you need to tell the map its div has changed size or become visible (different browsers handle that differently); but there's no way to check that. — Andrew Leach, Mar 18 '12 at 18:15
I don't care about making my code unreadable. I only use it for the purpose of shortening down my scripts even more. As for the resize, I do define a jQuery UI 'open' event in which I trigger Google Map's resize event. — mateusz, Mar 18 '12 at 18:31
In that case please make your code readable so we can run a debugger on it meaningfully. — Andrew Leach, Mar 18 '12 at 18:33
I just disabled obfucation. I didn't think it was necessary as the script above is quite short and function names do remain the same in the obfuscated version (I use YUI tools). — mateusz, Mar 18 '12 at 18:39

score 0 · Answer 1 · answered Mar 18 '12 at 19:10

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)

score 0 · Accepted Answer · answered Mar 19 '12 at 03:16

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!

Google Maps V3 JavaScript works only in Chrome?

2 Answers2

Linked