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

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

• javascript
• google-maps

• Does <Ctrl>+<F5> help? – mkilmanas Commented Jun 6, 2011 at 5:26
• @mkilmanas I tried. Many, many times. I cleared the cache too. – Alexandre Testu Commented Jun 6, 2011 at 5:33
• 3 Weird. Maybe then you should double-check if you don't have coliding css declarations (i.e. same ids or classes) - which is not very likely, but still worth a ckeck. – mkilmanas Commented Jun 6, 2011 at 5:35

2 Answers 2

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.