IE8中的Google地圖API加載失敗（「google」未定義）

當我在腳本標記中加載http://maps.google.com/maps/api/js?sensor=false時，Chrome，Safari，Firefox和IE9中的所有內容都能正常工作。IE8中的Google地圖API加載失敗（「google」未定義）

然而，當我看到在IE9 在兼容模式（或者，有人告訴我，在IE8）地圖不加載和「‘谷歌’是未定義的」被記錄在控制檯中。

下面是相關的代碼，與被觸發帶有註釋標識錯誤的行：

<html> 
<head> 
<title>Test Map</title> 
<script type="application/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
</head> 
<body> 
<div id="map_canvas"></div> 
<script type="text/javascript"> 
var lat=37.763154; 
var lon=-122.457941; 
var initialZoom=17; 
var mapTypeId = 'Custom Map'; 
var mapStyle = [{featureType:"landscape", elementType:"all", stylers:[{hue:"#dae6c3"},{saturation:16},{lightness:-7}]}, 
       {featureType:"road", elementType:"geometry", stylers:[{hue:"#ffffff"},{saturation:-100},{lightness:100}]}]; 

//**The error is tripped in this next line, again only in IE9 compatibility mode or IE8*  
var styledMap = new google.maps.StyledMapType(mapStyle); 

var mapType = new google.maps.ImageMapType({ 
    tileSize: new google.maps.Size(256,256), 
    getTileUrl: function(coord,zoom) { 
     return "img/tiles/"+zoom+"/"+coord.x+"/"+coord.y+".png"; 
    } 
}); 
var map = new google.maps.Map(document.getElementById("map_canvas"), 
     {center:new google.maps.LatLng(lat,lon), 
     mapTypeId:google.maps.MapTypeId.ROADMAP, 
     zoom:initialZoom, 
     mapTypeControl:false}); 
map.overlayMapTypes.insertAt(0, mapType); 

map.mapTypes.set(mapTypeId, styledMap); 
map.setMapTypeId(mapTypeId); 
</script> 
</body> 
</html>

所以，出於某種原因，只有在IE9 +兼容模式和IE8，腳本標記，用於指定http://maps.google.com/maps/api/js?sensor=false未在正文中的後續嵌入腳本之前加載和/或執行。

其他人能夠複製嗎？我該如何糾正這個問題？

來源

2011-06-13 Trott

你在菲德勒看到什麼？ – SLaks 2011-06-13 19:10:18

我不認爲它是你的錯。它只是IE的兼容模式，它阻止了活動腳本。（可能...） – 2011-06-13 19:51:55

這個問題顯然是因爲IE 8沒有注意「application/javascript」。我在<head>部分的<script>標記中將其更改爲「text/javascript」，現在我的代碼可以工作。當然，如果我將它改回「application/javascript」，那麼它就停止工作。

來源

2011-06-14 16:57:44 Trott

IE正在下載，然後嘗試在本地機器上執行JS，而其他瀏覽器只是將其作爲文本文件打開。你可以從IE瀏覽器下載任何東西下載到的默認情況下的JS。

編輯：根據更新，看到這個小提琴看到一種工作修復。 http://jsfiddle.net/h6rc3/

來源

2011-06-13 19:14:26

哦，我現在看到了。我感到很傻。（顯然，我並沒有使用IE。）好的，所以這不是問題。我將不得不更新我的問題。 – Trott 2011-06-13 19:22:32

@Trott：不用擔心，我不得不去找IE自己:) – 2011-06-13 19:25:56

確保IE不處於脫機模式。聽起來像瀏覽器沒有連接到互聯網。

來源

2011-06-13 19:15:41 brenjt

絕對不是在離線模式下，但這是一個很好的猜測。當我在IE9中關閉兼容模式時，它可以正常工作。打開它，沒有地圖，我在控制檯中得到「'google'未定義」。這只是兼容模式（或者，根據我的用戶，使用IE8）觸發它。 – Trott 2011-06-13 19:19:18

感謝@brenjt，您的提示解決了我的問題。 – Jaikrat 2014-07-30 12:46:38

我的谷歌地圖v3站點停止工作在IE 9兼容性視圖模式下，IE 8和IE7。

原因：使用jQuery的java腳本錯誤僅在使用IE F12開發人員工具檢查腳本時發生。這是違規行。該錯誤缺少來自令牌類的單引號。

$('<tr>', { 'class': country }).appendTo(tableSelector).append(h1).append(h2);

起初我追求虛假的領先優勢，認爲它是另外一個關鍵的= http://maps.googleapis.com/maps/api/js?key=MY_KEY_FROM_API_CONSOLE&sensor=false

的教訓是：使用的工具，螢火蟲或IE工具或什麼的，檢查您的JavaScript介紹的問題。

來源

2012-02-22 19:10:56 subsci

一個猜測是，你的網頁是通過https工作的，而來自Google的請求是http。將Google請求轉換爲https，錯誤將消失。這爲我工作。

請參閱：Possible solution

來源

2012-03-25 16:32:02

IE8中的Google地圖API加載失敗（「google」未定義）

回答

相關問題