Google Maps api v3 tools: visual distortions?

Question

I just noticed that the gMap view tools are displaying…rather unusually. Their regions still seem to be properly defined—I can interact with them just fine, it's just their appearance that looks messed up.

I haven't applied any CSS to any of the map pieces, and the only css I've applied to the map container is width:100%; height:100%; z-index:0; (which I normally do).

I do have other elements on the page which have position:absolute; and position:fixed; and some high z-indexs (500 & 1000). Is it possible they are causing the visual distortion of the Map's tools?

I see the same weird visual distortion in the latest versions of Chrome, Chrome Canary, Ffx, Safari, and Opera (on Mac OSX).

I checked dev tools / firebug, and no unexpected CSS is being applied to the map's container or directly to its tools.

Google Maps Api v3: Map interface tools

Here is the exact HTML (I stripped out the other elements and css and the weirdness still happens):

<html style="width:100%;height:100%;">
    <head>
        <link rel="stylesheet" href="shared/bootstrap/css/foundation.min.css">
        <link rel="stylesheet" href="shared/bootstrap/css/v2.2.2.min.css">
        <script
            type="text/javascript"
            src="http://maps.googleapis.com/maps/api/js?key=...">
        </script>
        <script type="text/javascript">
            function ginit() {
                var vancouver = new google.maps.LatLng(49.285415,-123.114982);
                var mapOptions = {
                    center: vancouver,
                    zoom: 15,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(
                    document.getElementById("map"),
                    mapOptions
                );
                var infowindow = new google.maps.InfoWindow(),
                    marker;
            }//ginit()
        </script>
    </head>
    <body onload="ginit();" style="width:100%;height:100%;">
        <div id="map" style="width:100%;height:100%;"></div>
    </body>
</html>

EDIT: It appears the issue is coming from the combination of Foundation and Bootstrap: removing either one fixes the issue. Also it doesn't matter that no elements on the page reference classes from the libs, it causes the distortion all the same.

I tried to put this up in a fiddle, but I couldn't get jsfiddle.net to load.

Just this new project? All projects? On one computer? All computers? Can we see a demo? Not much to do here otherwise. — Sparky, Dec 19 '12 at 22:40
I'm only working on one project at the moment. And I've tested it on 2 computers: OSX 10.6 & 10.8. I'm working on a dumbed down fiddle (there's a lot of framework stuff happening that I have to strip out), but I'm having trouble accessing jsfiddle.net. — Jakob Jingleheimer, Dec 19 '12 at 22:43
Yeah, for some reason jsFiddle is very slow right now. You're doing the right thing by making a demo, but this is exactly why questions should not rely _solely_ on jsFiddle to show their code. — Sparky, Dec 19 '12 at 22:48
Oh my there's definitely too much code to post in my question ;) — Jakob Jingleheimer, Dec 19 '12 at 22:51
You are expected to [post a concise question containing the bare minimum code required to reproduce the problem](http://sscce.org)... it's the only way these questions can remain useful for others in the future. If it's too much code to post, then it's the type of question that probably doesn't belong here. i.e.- _"find my problem buried somewhere on this site"_, etc. — Sparky, Dec 19 '12 at 22:53
My question is basically if anyone has encountered something like this before, or how could elements from outside the map's container affect the display of its tools (to which the API applies inline css). — Jakob Jingleheimer, Dec 19 '12 at 23:01
If that's your question, then it does not follow the format for SO. We're here to help you find programming solutions for specific pieces of code, not general troubleshooting sessions or discussion. — Sparky, Dec 19 '12 at 23:04
to sort this out, set .gmnoprint img {max-width:none}. [source][1]. [1]: http://stackoverflow.com/questions/9904379/google-map-zoom-controls-not-displaying-correctly — user3680625, May 27 '14 at 16:21

score 58 · Accepted Answer · answered Jan 13 '13 at 18:50

58

For the future users who face same problem, here is the fix.

#map img{max-width: inherit;}

Like other answers said it is problem with max-width.

answered Jan 13 '13 at 18:50

KA.

4,220
5
26
37

2

`#map img {max-width: inherit !important; max-height: inherit !important}` – Khoa Nguyen Mar 26 '15 at 02:54

Jakob Jingleheimer · Answer 2 · 2012-12-20T01:01:31.093

20

Bootstrap and Foundation set { img max-width:100% } for Google Maps canvases. This causes the Maps controls to appear distored. Alter the css to be max-width:none;. [source]

Caveat: Apparently img { max-width: 100% … } is integral for images auto-resizes for responsive layouts, so use with caution. [source]

edited Dec 20 '12 at 01:01

answered Dec 20 '12 at 00:48

Jakob Jingleheimer

30,952
27
76
126

Yes, #map-canvas img { max-width:none; } fixed this for me. – Terje Nesthus Dec 19 '14 at 02:04

score 0 · Answer 3 · answered Feb 18 '15 at 14:36

Foundation 5 no only breaks gmap, it also breaks MapQuest. Luckily both Goomap & Quest have class to allow us to overload F5 behavious only for maps display.

.google-map {
  height: 400px;  // no default height
  color: #191970; // default color for both text and background is white !!!
}

.quest-map {
  height:400px; 
  color: #191970;
}

// Fix Foundation bug with MapQuest
.mqa-display {
  img {max-width: none;}
  label { width: auto; display: inline; }
}

// Fix Foundation bug with GoogleMap
.gm-style {
  img { max-width: none; }
  label { width: auto; display: inline; }
}

Google Maps api v3 tools: visual distortions?

3 Answers3

Linked