title: Google Maps V3 JavaScript works only in Chrome?
body: <p>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 &amp; 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.</p>
  
  <p>I know that :</p>
  
  <ul>
  <li>I connect with the API successfully with my API key. </li>
  <li>The address is properly geocoded.</li>
  <li>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.</li>
  </ul>
  
  <p>Below is my script, how I invoke it, and the website that I am using this on.</p>
  
  <p>Here's the script:</p>
  
  <pre><code>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);
    }
  }
  </code></pre>
  
  <p>Here's how I invoke it :</p>
  
  <pre><code>// 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;
  });
  </code></pre>
  
  <p>And here's the URL of the problem (click on map):
  <a href="http://testing.fordservicecoupons.com/dealer/30000/premium_coupon_page" rel="nofollow">http://testing.fordservicecoupons.com/dealer/30000/premium_coupon_page</a></p>
  
  <p>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.</p>