Google Map Pan Control Disordered on IE 11

Question

I'm using Google Maps API v3 in my application. Maps Pan control isn't displaying properly on IE 10 and IE 11.

enter image description here .

It's working fine on Chrome, Mozilla and IE8, IE9. I can't figure out the way to resolve it.

on Stackoverflow, a nearly similar question is posted here: Google Maps zoom control

but not solution is not application. Definitely, it's the CSS issue, but I couldn't resolve it. I've checked in IE developer tool for any css class overriding, but no luck.

Have anyone faced the similar problem or anyone had any solution for this?

EDIT: The basic map is also disordered in my IE 11 version.![enter image description here] enter image description here]![enter image description here -- Anil

It doesn't happen for me with a [**basic map**](https://developers.google.com/maps/documentation/javascript/examples/map-simple) , we need to see your implementation. — Dr.Molle, Apr 01 '14 at 11:21
@Dr.Molle The basic map is disordered on my IE 11. attaching screenshot to my question Edit as well. — Anil, Apr 01 '14 at 11:36
Open [issue](https://code.google.com/p/gmaps-api-issues/issues/detail?id=4563) in the issue tracker (for IE10...) — geocodezip, Apr 01 '14 at 11:44

score 1 · Accepted Answer · answered Apr 01 '14 at 12:58

Well, as @geocodezip suggested, it's a bug till today in Google map API and best solution for it is to use css.

use below css on the page :

.gmnoprint div[title^="Pan"]
 {
        filter:alpha(opacity=0)!important;
 }

hope it would help others and save time.

-Anil

score 1 · Answer 2 · answered Oct 06 '14 at 10:03

1

I just added the styling to my CSS , and fix

.gmnoprint div[title^="Pan"] {
  opacity: 0 !important;
}

answered Oct 06 '14 at 10:03

Asanka Umesh

57
3

This actually worked for me too and the one above didn't. Thanks! – Jason Ellis Nov 19 '14 at 03:47

score 0 · Answer 3 · answered Nov 25 '14 at 09:47

An important addition to non-English localizations: You must use in style not "Pan", but the text specific to your locale. For example, for Russian localization - "Пан". Hover your mouse on a button of pan Control and look pop-up hint. In style the first 3 letters from it are used.

score 0 · Answer 4 · answered Dec 01 '14 at 16:37

FWIW - I've found that the above CSS isn't enough because we next get "+" for zoom in/out for street view. I made a slight modification...turn off all title items except the one we don't want hidden.

.gmnoprint div[title]
{
    opacity: 0 !important;
}
.gmnoprint div[title^="Exit Street View"]
{
    opacity: inherit !important;
}

score 0 · Answer 5 · answered Feb 18 '15 at 15:55

Late to the party I know, but when I came across this issue I implemented the following fix for my applications using Google Maps V3 which I know is similar to what has already been posted here, but just in case it helps as I know how damn frustrating these sorts of issues can be!

<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>

Google Map Pan Control Disordered on IE 11

5 Answers5