Controles borrosos/dañados de Google Maps

Question

Estoy viendo un comportamiento realmente extraño en mi aplicación Google Maps. Estoy usando Backbone:

initialize: -> 
    osmMapType = new google.maps.ImageMapType(
     getTileUrl: (coord, zoom) -> 
     "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) -> 
     "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) 

Estoy cargando la API como tal:

<script src="https://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script> 

Pero por alguna razón ... El mapa del google controles y superposiciones son "borrosa":

blurry controls... http://vuknikolic.wordpress.com/2012/04/02/twitter-bootstrap-and-google-maps-v3/

y una ventana de información ...

He revisado una y otra vez el código y no puedo ver el error, tampoco hay errores en la consola.

---

@geocodezip tenía razón, era el css. Básicamente, a Google Maps no le gusta la forma en que BootStrap maneja el ancho máximo de las imágenes. Así que hay que poner un pequeño programa en su CSS ...

#map img { 
    max-width: none; 
} 

http://vuknikolic.wordpress.com/2012/04/02/twitter-bootstrap-and-google-maps-v3/

Answer 1

No hay errores en el código. Es un problema con tu CSS.

Sólo tiene que añadir este CSS en su mapa de contenedores (suponiendo que tiene id=gmap):

#gmap img { 
    max-width: none; 
}