开发者

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:

InfoWindow graphics "messed up" using Google Maps API v3

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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜