Google Maps V3 JavaScript работает только в Chrome?

Question

Я написал скрипт, который сначала геокодирует адрес, а затем отображает карту этого адреса.Проблема в том, что он работает только в Chrome / Chromium.Другие браузеры (Firefox 10 и IE9) отображают серое поле.Проблема, которая может быть связана, если я добавлю маркер на карту, маркер не будет отображаться в Chrome.

Я знаю, что:

• Я успешно соединяюсь с API смой ключ API.
• Адрес правильно геокодирован.
• Я использую диалоговое окно jQuery UI для отображения карты.Это, однако, не кажется проблемой.Удаление диалога и использование статического div создает тот же результат «серого поля».

Ниже приведен мой сценарий, как я его вызываю, и веб-сайт, на котором я его использую.

Вот сценарий:

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);
  }
}

Вот как я его вызываю:

// 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;
});

А вот URL проблемы (нажмите на карту): http://testing.fordservicecoupons.com/dealer/30000/premium_coupon_page

И последнее, но не менее важное: я объединяю и запутываю свои JavaScripts, так что то, что вы видите выше, не совсем то, что в исходном тексте на сайте.

Answer 1

Ух ты ... Вот в чем проблема.

Макет, который я построил, был гибким.Итак, одним из первых правил CSS, которые я написал, было:

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

, чтобы div и изображения могли масштабироваться.По какой-то причине картам Google НЕ нравится это правило, конечным результатом которого является серый прямоугольник.

И поэтому я добавил еще одно правило - исключение для карт Google:

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

А затем в javascript:

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

Находка ('*') достанет нам всех потомков.

Альт!

Answer 2

Это не выглядит хорошо:

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

вы запускаете событие resize для элемента, который содержит карту (that.element), но вы должны активировать resize наобъект google.maps.Map (в данном случае это that.map)