Google Maps API load failure ("'google' is undefined") in IE8_问答_开发者

Google Maps API load failure ("'google' is undefined") in IE8

开发者 https://www.devze.com 2023-03-12 08:59 出处：网络

When I load http://maps.google.com/maps/api/js?sensor=false in a script tag, everything works fine for me in Chrome, Safari, Firefox, and IE9.

However, when I look in IE9 in compatibility mode (or, I'm told, in IE8) the map does not load and "'google' is undefined" is logged in the console.

Here's the relevant code, with the line that is triggering the error identified with a comment:

<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>
<开发者_StackOverflow社区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>

So, for some reason, and only in IE9+compatibility-mode and IE8, the script tag specifying http://maps.google.com/maps/api/js?sensor=false isn't loading and/or executing before the subsequent embedded script in the body.

Are others able to replicate? How do I correct this problem?

The problem, apparently, is that IE 8 doesn't grok "application/javascript". I changed it to "text/javascript" in the <script> tag in the <head> section and now my code works. And, of course, if I change it back to "application/javascript", then it stops working.

One guess is that you're page works over https while the request from Google is http. convert the Google request to https and the error will disappear. this worked for me.

See : Possible solution

My google maps v3 site stopped working in IE 9 compatibility view mode, IE 8 and IE7.

Reason: Error in java-script using jQuery only caught when using the IE F12 Developer tools to examine the script. Here is the offending line. The error was missing single quotes from the token, class.

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

At first I pursued a false lead, thinking it was the addition of a key= http://maps.googleapis.com/maps/api/js?key=MY_KEY_FROM_API_CONSOLE&sensor=false

The lesson is: use tools, Firebug or IE tools or whatever, to examine your javascript for introduced issues.

Make sure that IE isn't in offline mode. Sounds like the browser isn't connecting to the internet.

IE is downloading then attempting to execute the JS on your local machine, while the other browsers are simply opening it as a text file. You can find the downloaded JS from IE in wherever stuff downloads to by default.

EDIT: In light of updates, see this Fiddle to see a sort-of working fix. http://jsfiddle.net/h6rc3/