Verschwommene / beschädigte Google Maps-Steuerelemente
Ich sehe auf meiner Google Maps-App ein merkwürdiges Verhalten. Ich benutze 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)
Ich lade die API als solche:
<script src="https://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
Aber aus irgendeinem Grund ... sind die Steuerelemente und Overlays von Google Maps "verschwommen":
und ein Infofenster ...
Ich habe den Code immer wieder durchgesehen und kann den Fehler nicht sehen, es gibt auch keine Fehler in der Konsole.
@geocodezip war richtig, es war die CSS. Grundsätzlich gefällt Google Maps nicht, wie BootStrap mit der maximalen Breite von Bildern umgeht. Sie müssen also ein wenig in Ihr CSS hacken ...
#map img {
max-width: none;
}
http://vuknikolic.wordpress.com/2012/04/02/twitter-bootstrap-and-google-maps-v3/