If you’ve ever used Google Maps on a responsive web page, you’ve likely seen some of the map controls get stretched, jumbled or altogether disappear. After some tinkering with Firebug, the problem became clear. Luckily, the solution is extremely easy.

If you encounter this problem or something similar, it’s likely because one of your top-level elements or the global ‘*’ has styling filtering down into your map canvas, most likely with something common for responsive websites, such as this:

* {
    max-width:100%;
}

What happens is that this style is inherited by the Google Map canvas elements that are generated by the JavaScript API, and causes all map controls inside the map canvas to also stretch. The solution is rather simple – namespacing the map canvas and resetting the styling for all elements inside does the trick:

#map_canvas * {
    max-width:none;
}

Voila! Google map controls are fixed on your responsive web page.