Quick note

Fix for weird looking Google Maps controls and overlays

Recently I have on two different sites run an into issue when using Google Maps API v3 - the controls for zooming have looked partially hidden and skewed.

When using overlays such as InfoWindow there has been similar issues with odd looking shadows and lines in and around them resembling the type of fractals that can be seen when the graphics card is struggling during 3D intensive games.

On both the issues were caused by image tags having max-width set to 100% in the CSS. Setting that to "none" instead for images withing the element containing the map, like the CSS example below, fixed it.

.map_canvas img {
    max-width: none;
Joel Abrahamsson

Joel Abrahamsson

I'm a passionate web developer and systems architect living in Stockholm, Sweden. I work as CTO for a large media site and enjoy developing with all technologies, especially .NET, Node.js, and ElasticSearch. Read more

More about Programming