Google Maps zoom control is messed up

Question

I use the Google Maps API (v.3) to show a map with a couple of markers. I recently noticed that the control used to zoom the map is messed up (it wasn\'t always like this).

Answer 1

Just share @Max-Favilli answer:

With latest version of google maps api you need this:

<style>
.gm-style img { max-width: none; }
.gm-style label { width: auto; display: inline; }
</style>

Thanks to @Max-Favilli

https://stackoverflow.com/a/19339767/3070027

Answer 2

Those options you guys told me didn´t work for my website.

I use Bootstrap V3 and focussed on the functionality. The main reason was that i had given my map a different ID then the CSS file used to display the zoom bar with the yellow streetvieuw guy

I renamed map_canvas to mapholder and then it worked for me! Thanks anyways for the hints that i should look into the CSS files!

Answer 3

#myMap_canvas img {
    max-width: none;
}

fixed it for me, but I also wanted to point out the comment on the question by @Ben, "This issue doesn't happen with Bootstrap if you use the is map_canvas as the map div id". He's right. I'm not using Bootstrap, but the problem started happening after I changed the div id.

Setting it back to map_canvas fixed it without the max-width change.

<div id="map_canvas"></div>