0

This question is loosely related to another I've asked here: Google Maps API v3.19 Broken in Internet Explorer Quirks Mode. While trying to find a fix for that issue Pointy suggested a change which gave me a usable map, however the suggestion raised another issue with the Google Maps navigation controls in the top left. As I drag the map in IE11 the navigation controls 'wiggle' around and look quite odd. The issue also happens with the previous (frozen) Google Maps release 3.18 and so appears to be another concern, rather than the one referred to my other question, hence the reason I've raised this issue in a question of it's own.

This page demos the problem in IE11. Chrome and Firefox work fine:

<!DOCTYPE html>
<head>
    <title>Google Maps Test Page</title>
</head>
<body style="margin:0; padding:0">
    <script src='http://maps.googleapis.com/maps/api/js?v=3.18' 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>

I haven't been able to test this in any other version of Internet Explorer but the problem is very evident in IE11. Does anyone know how to overcome this display issue?

Community
  • 1
  • 1
Elliveny
  • 2,159
  • 1
  • 20
  • 28

1 Answers1

0

I also encountered this problem some time back and after much hunting around on various forums found the following style changes addresses the issue, at least in my case anyway:

<script>
    var doc = document.documentElement;
    doc.setAttribute('data-useragent', navigator.userAgent);
</script>
<style type="text/css">
html[data-useragent*='Trident/7.0'] div[title^="Zoom"]
 {
        opacity: 0 !important;
 }
 html[data-useragent*='Trident/7.0'] div[title^="Pan"]
 {
        opacity: 0 !important;
 }
</style>

Give that a try and see if it helps, I hope it does, I now only too well how much pain this caused and time spent to find a working solution!

mindparse
  • 6,115
  • 27
  • 90
  • 191