Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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:

messed up InfoWindow

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) and Firefox.

like image 599
Alexandre Testu Avatar asked Nov 30 '22 16:11

Alexandre Testu


1 Answers

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 image 160
fdot Avatar answered Dec 05 '22 18:12

fdot