Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Google Maps API v3.19 Broken in Internet Explorer Quirks Mode

Version 3.19 of the Google Maps API became the default maps 'release' on the 17th Feb 2015 (See https://code.google.com/p/gmaps-api-issues/wiki/JavascriptMapsAPIv3Changelog). The release appears to be causing issues in Internet Explorer when using quirks mode, as is demonstrated by the following test page that I produced from an application which is affected by this issue (and so this may include more code than is necessary here):

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Google Maps Test Page</title>
</head>
<body style="margin:0; padding:0">
    <!-- Adding ?v=3.18 onto the end of this URL will 'fix' the problem -->
    <script src='http://maps.googleapis.com/maps/api/js' type='text/javascript'></script>
    <script type='text/javascript'>
    function initialize() {
        top.google.maps.visualRefresh=true;
        var mapOptions = {
            zoom: 13,
            center: new google.maps.LatLng(51.5072, 0.1275),
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            scaleControl: true,
            overviewMapControl: true
        };
        this._map = new google.maps.Map(document.getElementById('myMap'), mapOptions);  
    }

    google.maps.event.addDomListener(window, 'load', initialize);
    </script>

    <div id="myMap" style="width:500px;height:500px;position:relative;"></div>
 </body>
 </html>

Both Firefox and Chrome will properly show a useable map, while IE raises an error deep in the Google Maps code which reads 'Could not get the display property. Invalid argument.' I've tried debugging the code but it is obfuscated, making it a painful challenge.

Forcing the version back to the last 'frozen' release (3.18) fixes the issue for the time being, but this is only a temporary resolution.

Can anyone suggest a resolution other than report this to Google and hope they fix it?


Additional note:

As I write I note that the information here https://code.google.com/p/gmaps-api-issues/wiki/JavascriptMapsAPIv3Changelog says the releases are:

Experimental: 3.20
Release: 3.19
Frozen: 3.18 

Version 3.17 will be removed. Requests for 3.17 or any prior version will now be served version 3.18'

While this page https://developers.google.com/maps/documentation/javascript/basics#Versioning says (at the bottom of the page):

Version 3.18 Reference (Release)
Version 3.19 Reference (Experimental)
Version 3.17 Reference (Frozen)
Versions 3.0 - 3.16 have been retired.

This is rather confusing but I would think the Changelog link to be the more up to date source of information. This difference confused me so I thought it worth sharing the observation.


Update 20-Feb-15:

Yesterday Google confirmed this as a Bug - see https://code.google.com/p/gmaps-api-issues/issues/detail?id=7675 - and advised 'We're looking into a fix.'

Thanks for the comments and suggestions, but so far I haven't been able to find a work around which allows my application to work fully as other page components depend on quirks mode, creating a good deal of work to get the whole thing working again. I'm hopeful that Google's attention will resolve this for me.


Update 21-Feb-15:

https://code.google.com/p/gmaps-api-issues/issues/detail?id=7675 now indicates 'A fix will be deployed in the coming week.'

like image 733
Elliveny Avatar asked Feb 18 '15 15:02

Elliveny


People also ask

Why isn't my Google Maps API working?

There are a several reasons why your google maps may not be working, the most common issue being no Google Map API key set or set incorrectly. To use the Google Maps JavaScript API, you must register your app project on the Google Cloud Platform Console and get a Google API key which you can add to your app.

Is Google Maps API no longer free?

Note that the Maps Embed API, Maps SDK for Android, and Maps SDK for iOS currently have no usage limits and are at no charge (usage of the API or SDKs is not applied against your $200 monthly credit).

What is the current Google Maps API version?

12 May, 2022 The weekly channel updates to version 3.49. The quarterly channel updates to version 3.48. Versions 3.47 and 3.46 are still available when requested by number.

What is the best free map API?

Mapbox is probably the most popular Google Maps API alternative developers and businesses use. They have been in business since 2010 and started as a free map data and analysis service for non-profit organizations. Today, they provide map tools and data to players like Facebook, Lonely Planet, and Foursquare.


3 Answers

Found the same issue today with a web app I've just inherited. For some reason the previous devs were forcing IE into quirks (ie7) mode and the google api issue started today. I've updated the main html page to use IE edge mode by changing the html head section from

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
 <head>
    <meta http-equiv="X-UA-Compatible" content="IE=7" /> 
 .....

to

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
 <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
.....

(if you are missing it add the ie-edge meta... line)

and its fixed it so far.

Now to find out why the previous devs were forcing IE7 mode....

like image 187
ajg Avatar answered Oct 17 '22 06:10

ajg


SOLVED: Had same problem with IE8 (XP), IE9 (Win7) and compatibility mode in Win 7 and XP. I added the version number and voila! Fixed.

http://maps.googleapis.com/maps/api/js?v=3&key=...

Specifying v=3 forces the stable release. My old code without this version flag was interpreted by Google as I wanted the experimental version which I never want for my production server.

FYI, I use <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

like image 25
Joseph Avatar answered Oct 17 '22 05:10

Joseph


We are using the GMLib Google Maps delphi component and we had the same problem. The GMLib component uses the TWebBrowser component inside.

Within the resource files of the GMLib component we found a map.html file. We added the following line to the section of the html file.

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

We then recompiled the resource files into the component, recompiled the delphi project and it worked.

I suppose this is one of the downsides of using relatively unsupported free components.

We are now considering moving to a commercial paid for google maps component to reduce the risk of this happening again.

like image 1
Chris Fox Avatar answered Oct 17 '22 04:10

Chris Fox