{"id":7060,"date":"2014-05-19T04:11:03","date_gmt":"2014-05-19T04:11:03","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2014\/05\/19\/google-maps-api-v3-tools-visual-distortions-collection-of-common-programming-errors\/"},"modified":"2014-05-19T04:11:03","modified_gmt":"2014-05-19T04:11:03","slug":"google-maps-api-v3-tools-visual-distortions-collection-of-common-programming-errors","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2014\/05\/19\/google-maps-api-v3-tools-visual-distortions-collection-of-common-programming-errors\/","title":{"rendered":"Google Maps api v3 tools: visual distortions?-Collection of common programming errors"},"content":{"rendered":"<p>I just noticed that the gMap view tools are displaying\u2026rather unusually. Their regions still seem to be properly defined\u2014I can interact with them just fine, it&#8217;s just their appearance that looks messed up.<\/p>\n<p>I haven&#8217;t applied any CSS to any of the map pieces, and the only css I&#8217;ve applied to the map container is <code>width:100%; height:100%; z-index:0;<\/code> (which I normally do).<\/p>\n<p>I do have other elements on the page which have <code>position:absolute;<\/code> and <code>position:fixed;<\/code> and some high <code>z-index<\/code>s (500 &amp; 1000). Is it possible they are causing the visual distortion of the Map&#8217;s tools?<\/p>\n<p>I see the same weird visual distortion in the latest versions of Chrome, Chrome Canary, Ffx, Safari, and Opera (on Mac OSX).<\/p>\n<p>I checked dev tools \/ firebug, and no unexpected CSS is being applied to the map&#8217;s container or directly to its tools.<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/i.stack.imgur.com\/PA55U.png\" \/><\/p>\n<p>Here is the exact HTML (I stripped out the other elements and css and the weirdness still happens):<\/p>\n<pre><code>\n    \n        \n        \n        \n        \n        \n            function ginit() {\n                var vancouver = new google.maps.LatLng(49.285415,-123.114982);\n                var mapOptions = {\n                    center: vancouver,\n                    zoom: 15,\n                    mapTypeId: google.maps.MapTypeId.ROADMAP\n                };\n                var map = new google.maps.Map(\n                    document.getElementById(\"map\"),\n                    mapOptions\n                );\n                var infowindow = new google.maps.InfoWindow(),\n                    marker;\n            }\/\/ginit()\n        \n    \n    \n        \n    \n\n<\/code><\/pre>\n<p><em><strong>EDIT<\/strong><\/em>: It appears the issue is coming from the combination of Foundation and Bootstrap: removing either one fixes the issue. Also it doesn&#8217;t matter that no elements on the page reference classes from the libs, it causes the distortion all the same.<\/p>\n<p>I tried to put this up in a fiddle, but I couldn&#8217;t get jsfiddle.net to load.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I just noticed that the gMap view tools are displaying\u2026rather unusually. Their regions still seem to be properly defined\u2014I can interact with them just fine, it&#8217;s just their appearance that looks messed up. I haven&#8217;t applied any CSS to any of the map pieces, and the only css I&#8217;ve applied to the map container is [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-7060","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/7060","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=7060"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/7060\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=7060"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=7060"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=7060"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}