Chances are if you’re developing a responsive website and using a Google map you will encounter an issue where the zoom control and street view control appear to be broken, they’re there but not clickable and look corrupted. The issue is the usual process of developing a responsive site entails of setting max-width: 100% to all images on the site in the form of the following:
img {
max-width: 100%;
}This will also break your Google Map controls. The simple fix is to fix the max-width property by targeting your map container with the following CSS:
#mapcontainer img { max-width: inherit; }Replace #mapcontainer with the ID of your map and presto, problem solved. If that doesn’t solve the issue, you can try appending an !important declaration to the end of it to override any potentially persistent CSS (but you should never need to do that).
Thanks 🙂
It works.. I saw this other solution on stockovrflow
.gm-style img { max-width: none; }
.gm-style label { width: auto; display: inline; }
Mine was actually a max-height issue, but I never would have considered it without this article. Thanks so much for taking the time to write this out for everyone.