Google Maps zoom control is messed up

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). I have no idea what the cause is.

Update

This post originally had a link to a page where you could view the issue, but the link is broken now, so I've removed it.

---

Your CSS messed it up. Remove max-width: 100%; in line 814 and zoom controls will look fine again. To avoid such bugs use more specific selectors in your CSS.

---

#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>

---

If you're using Bootstrap, just give it "google-maps" class. This worked for me.

As an alternative you might reset everything for the google map div as a kind of last-resort solution:

HTML:

<div class="mappins-map"><div> 

CSS:

.mappins-map img { 
    max-width: none !important; 
    height: auto !important; 
    background: none !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

链接地址: http://www.djcxy.com/p/14312.html

上一篇: 谷歌地图API缩放范围

下一篇: Google地图缩放控件混乱了