Điều khiển Google Maps mờ/bị hỏng

Question

Tôi thấy một số hành vi thực sự kỳ lạ trên ứng dụng Google Maps của mình. Tôi đang sử dụng 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) 

Tôi tải API như vậy:

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

Nhưng vì một lý do ... google maps điều khiển và lớp phủ là "mờ":

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

và một infowindow ...

Tôi đã xem qua và qua mã và không thể thấy lỗi, cũng không có lỗi trong bảng điều khiển.

---

@geocodezip đúng, đó là css. Về cơ bản, Google Maps không thích cách BootStrap đẩy hình ảnh có chiều rộng tối đa. Vì vậy, bạn cần phải đặt một ít hack trong CSS của bạn ...

#map img { 
    max-width: none; 
} 

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

Answer 1

Không có lỗi trong mã của bạn. Đó là một vấn đề với css của bạn.

Chỉ cần thêm CSS này vào bình chứa bản đồ của bạn (giả sử nó có id=gmap):

#gmap img { 
    max-width: none; 
}