Menu
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.
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.
275
Google Maps APIs are prepackaged pieces of code that let you quickly and easily include maps on your websites or in your mobile apps – and then add extra functions to your applications. They're available for Android, iOS and web browsers, and as HTTP web services that let you pass information between systems.
Sets the viewport to contain the given bounds. Note: When the map is set to display: none , the fitBounds function reads the map's size as 0x0, and therefore does not do anything. To change the viewport while the map is hidden, set the map to visibility: hidden , thereby ensuring the map div has an actual size.
An MVCArray inherits from MVCObject so you can set or get its properties, bind some of them, be binded by other objects, etc. But also, it implements some extras. It implements several of the methods you could use in a native javascript array, like push , pop , forEach , etc, so several google.
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.
119
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]
37
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
