Google Maps V3 JavaScript僅適用於Chrome？

我寫了一個腳本，首先對地址進行地理編碼，然後顯示該地址的地圖。問題是，它只適用於Chrome/Chromium。其他瀏覽器（Firefox 10 & IE9）顯示灰色框。一個可能相關的問題，如果我向地圖添加標記，標記不會顯示在Chrome中。Google Maps V3 JavaScript僅適用於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，因此您在上面看到的內容與網站上的源代碼不完全相同。

來源

2012-03-18 mateusz

你的混淆並沒有任何好處。我懷疑你需要告訴地圖它的div已經改變大小或變得可見（不同的瀏覽器處理方式不同）;但沒有辦法檢查。 – 2012-03-18 18:15:18

我不在乎讓我的代碼不可讀。我只用它來縮短我的腳本甚至更多。至於調整大小，我確實定義了一個jQuery UI'open'事件，其中我觸發了Google Map的resize事件。 – mateusz 2012-03-18 18:31:44

在這種情況下，請讓您的代碼可讀，以便我們可以有意義地運行調試器。 – 2012-03-18 18:33:44

哇......這是問題所在。

我建立的佈局是流體佈局。所以，我寫的第一個CSS規則之一是：

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

因此，div和圖像可以縮放。那麼，無論出於何種原因，谷歌地圖不會像這條規則，最終的結果是一個灰色的框。

所以我增加了一個規則 - 對谷歌地圖的異常：

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

，然後在javascript：

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

的發現（ '*'）將得到我們所有的後代。

中提琴！

來源

2012-03-19 03:16:04 mateusz

這看起來並不好：

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）

來源

2012-03-18 19:10:50

謝謝。我更改了代碼，但問題仍然存在。 – mateusz 2012-03-18 19:55:15

Google Maps V3 JavaScript僅適用於Chrome？

回答

相關問題