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;
}
Similar articles
- Responsibly Responsive Web Design at Expressen
- A simple example of the Open/Closed Principle
- A few new tools in my .NET development toolbox
- Twitter style paging with ASP.NET MVC and jQuery
- Learning Scala part five - Methods
- EPiServer 7 and MVC – Custom tags and CSS classes when rendering properties
- Web testing with Selenium and xUnit.net
- Error: connect ECONNREFUSED when integration testing a Node.js app
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
