IE8 中的 Google Maps API 加载失败（“'google' 未定义”）答案

【问题标题】：Google Maps API load failure ("'google' is undefined") in IE8IE8 中的 Google Maps API 加载失败（“'google' 未定义”）
【发布时间】：2011-06-13 19:08:38
【问题描述】：

当我在脚本标签中加载 http://maps.google.com/maps/api/js?sensor=false 时，在 Chrome、Safari、Firefox 和 IE9 中一切正常。

但是，当我查看 IE9 兼容模式（或者，有人告诉我，在 IE8 中）时，地图无法加载并且“'google' 未定义" 已登录控制台。

以下是相关代码，其中触发错误的行用注释标识：

<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 的脚本标记不会在正文中的后续嵌入脚本之前加载和/或执行。

其他人能够复制吗？我该如何解决这个问题？

【问题讨论】：

我不认为这是你的错。它只是阻止活动脚本的 IE 兼容模式。（可能......）

标签： javascript google-maps internet-explorer-8 google-maps-api-3 google-api

【解决方案1】：

显然，问题在于 IE 8 无法识别“应用程序/javascript”。我在<head> 部分的<script> 标记中将其更改为“text/javascript”，现在我的代码可以工作了。当然，如果我把它改回“application/javascript”，它就会停止工作。

【讨论】：

【解决方案2】：

一种猜测是您的页面在 https 上运行，而来自 Google 的请求是 http。将 Google 请求转换为 https，错误就会消失。这对我有用。

见：Possible solution

【讨论】：

【解决方案3】：

我的 google maps v3 网站在 IE 9 兼容视图模式、IE 8 和 IE7 下停止工作。

原因：使用 jQuery 的 java-script 中的错误仅在使用 IE F12 Developer 工具检查脚本时才被发现。这是违规行。错误是缺少标记类中的单引号。

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

一开始我追求的是一个错误的线索，以为是添加了一个关键= http://maps.googleapis.com/maps/api/js?key=MY_KEY_FROM_API_CONSOLE&sensor=false

课程是：使用工具、Firebug 或 IE 工具或其他工具来检查您的 javascript 是否存在引入的问题。

【讨论】：

【解决方案4】：

确保 IE 未处于离线模式。听起来浏览器没有连接到互联网。

【讨论】：

绝对不是离线模式，但这是一个很好的猜测。当我在 IE9 中关闭兼容模式时，它可以工作。打开它，没有地图，我在控制台中得到“'google'未定义”。触发它的只是兼容模式（或者，根据我的用户，使用 IE8）。

【解决方案5】：

IE 正在下载然后尝试在本地计算机上执行 JS，而其他浏览器只是将其作为文本文件打开。您可以在默认下载的任何地方找到从IE下载的JS。

编辑：根据更新，请参阅此 Fiddle 以查看某种工作修复。 http://jsfiddle.net/h6rc3/

【讨论】：

哎呀，我现在明白了。我觉得很傻。（很明显，我不怎么使用 IE。）好吧，这不是问题所在。我必须更新我的问题。
@Trott：不用担心，我必须自己去找 IE :)