title: Blurry / Corrupted  Google Maps Controls
body: <p>I am seeing some really odd behaviour on my Google Maps app. I am using Backbone:</p>
  
  <pre><code>  initialize: -&gt;
      osmMapType = new google.maps.ImageMapType(
        getTileUrl: (coord, zoom) -&gt;
          "http://tile.openstreetmap.org/#{zoom}/#{coord.x}/#{coord.y}.png"
        tileSize: new google.maps.Size(256, 256)
        isPng: true
        alt: "OpenStreetMap layer"
        name: "OSM"
        maxZoom: 19
      )
  
      cloudMadeMapType = new google.maps.ImageMapType(
        getTileUrl: (coord, zoom) -&gt;
          "http://b.tile.cloudmade.com/a97cc0871d97477b911c3f9155a93ee7/26250/256/#{zoom}/#{coord.x}/#{coord.y}.png"
        tileSize: new google.maps.Size(256, 256)
        isPng: true
        alt: "CloudMade layer"
        name: "CMade"
        maxZoom: 13
      )
  
      lat = 51.503
      lng = -0.113
      latlng = new google.maps.LatLng(lat, lng)
      options =
        zoom: 10
        center: latlng
        mapTypeId: 'OSM'
      @gMap = new google.maps.Map(document.getElementById("map"), options)
      @gMap.mapTypes.set('OSM', osmMapType)
      @gMap.mapTypes.set('CloudMade', cloudMadeMapType)
      @gMap.setMapTypeId(google.maps.MapTypeId.TERRAIN)
  </code></pre>
  
  <p>I am loading the API as such:</p>
  
  <pre><code>&lt;script src="https://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>But for some reason... the google maps controls and overlays are "blurry":</p>
  
  <p><a href="http://vuknikolic.wordpress.com/2012/04/02/twitter-bootstrap-and-google-maps-v3/">blurry controls... http://vuknikolic.wordpress.com/2012/04/02/twitter-bootstrap-and-google-maps-v3/</a></p>
  
  <p>and an infowindow...</p>
  
  <p><img src="https://i.stack.imgur.com/n08OK.png" alt="infowindow doing the same thing"></p>
  
  <p>I have looked over and over the code and can not see the error, there are no errors in console either.</p>
  
  <hr>
  
  <p>@geocodezip was right, it was the css. Essentially Google Maps does not like the way BootStrap handels the max-width of images. So you need to put a little hack in your CSS...</p>
  
  <pre><code>#map img {
      max-width: none;
  }
  </code></pre>
  
  <p><a href="http://vuknikolic.wordpress.com/2012/04/02/twitter-bootstrap-and-google-maps-v3/">http://vuknikolic.wordpress.com/2012/04/02/twitter-bootstrap-and-google-maps-v3/</a></p>