InfoWindow graphics "messed up" using Google Maps API v3
I'm simply putting a marker on the map (after it's all set up and centered like in the sample code in the Google documentation) using geocoder and place an infoWindow on it like so:
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
title: title
});
google.maps.event.addListener(marker, 'click', function () {
console.log('openInfoWindow');
infoWindow.setContent(content);
infoWindow.open(map, marker);
});
};
});
content
is just an HTML link, address
is a valid address (since I have no problem showing the marker).
As you can see on this picture, I have a little graphical problem:
It's like the css sprite is all… messed up. I have no idea where this problem comes from, have been on it for a while now and I'm getting annoyed… any guess is helpful at this point. The screen capture is the same in Webkit (Safari & Chrome) an开发者_开发技巧d Firefox.
This is old, but here is a more general solution from the github issue:
img[src*="gstatic.com/"], img[src*="googleapis.com/"] {
max-width: 99999px;
}
Like mkilmanas guessed, it was a colliding CSS declaration. I had this in my CSS file:
img {
max-width: 300px;
}
I am fully aware of how stupid that was. Thanks a lot mkilmanas.
精彩评论