Rozmyty/Uszkodzony Google Maps Controls

Question

Widzę dziwne zachowanie w mojej aplikacji Mapy Google. Używam 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) 

wczytuję API, takich jak:

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

Ale z jakiegoś powodu ... Google Maps kontrole i nakładki są "rozmyte":

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

i infowindow ...

Rozejrzałem się po kodzie i nie widziałem błędu, nie ma również błędów w konsoli.

---

@geocodezip miał rację, to było css. Zasadniczo Google Maps nie podoba sposób, w jaki BootStrap obsługuje maksymalną szerokość obrazów. Więc trzeba umieścić trochę siekać w CSS ...

#map img { 
    max-width: none; 
} 

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

Answer 1

Nie

ma żadnych błędów w kodzie. To jest problem z twoim css.

Wystarczy dodać ten CSS w twojej mapie pojemnika (przy założeniu, że ma id=gmap):

#gmap img { 
    max-width: none; 
}