title: Google Maps api v3 tools: visual distortions?
body: <p>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.</p>
  
  <p>I haven't applied any CSS to any of the map pieces, and the only css I've applied to the map container is <code>width:100%; height:100%; z-index:0;</code> (which I normally do).</p>
  
  <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's tools?</p>
  
  <p>I see the same weird visual distortion in the latest versions of Chrome, Chrome Canary, Ffx, Safari, and Opera (on Mac OSX).</p>
  
  <p>I checked dev tools / firebug, and no unexpected CSS is being applied to the map's container or directly to its tools.</p>
  
  <p><img src="https://i.stack.imgur.com/PA55U.png" alt="Google Maps Api v3: Map interface tools"></p>
  
  <p>Here is the exact HTML (I stripped out the other elements and css and the weirdness still happens):</p>
  
  <pre><code>&lt;html style="width:100%;height:100%;"&gt;
      &lt;head&gt;
          &lt;link rel="stylesheet" href="shared/bootstrap/css/foundation.min.css"&gt;
          &lt;link rel="stylesheet" href="shared/bootstrap/css/v2.2.2.min.css"&gt;
          &lt;script
              type="text/javascript"
              src="http://maps.googleapis.com/maps/api/js?key=..."&gt;
          &lt;/script&gt;
          &lt;script type="text/javascript"&gt;
              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()
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body onload="ginit();" style="width:100%;height:100%;"&gt;
          &lt;div id="map" style="width:100%;height:100%;"&gt;&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong><em>EDIT</em></strong>: 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.</p>
  
  <p>I tried to put this up in a fiddle, but I couldn't get jsfiddle.net to load.</p>