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

最後にではなく、少なくとも私はJavaScriptを組み合わせて難読化しているので、上記の内容はウェブサイトのソースとまったく同じではありません。

Answer 1

となりました。

私が構築したレイアウトは流動的なレイアウトでした。だから、私はして書かれている最初のCSSルールの1：

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

のdivと画像が拡大できるようにするために。まあ、どんな理由であれ、Googleマップは最終結果が灰色のボックスであるこのルールが好きではありません。

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

のfind（ '*'）私たちのすべての子孫を取得します：JavaScriptでは、その後、

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

そして：グーグルマップの例外 -

そして私は別のルールを追加しました。

ビオラ！

Answer 2

これは良い見ていない：

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

あなたがマップ（that.element）を含む要素にサイズ変更イベントをトリガしていますが、google.maps.Map-にサイズを変更しなければならないトリガオブジェクト（この場合、that.map）は