Google Maps缩放控件搞砸了

我使用Google Maps API（v.3）来显示带有几个标记的地图。最近，我注意到用于缩放地图的控件被弄乱了（并非总是这样）。我不知道是什么原因。

更新资料

该帖子最初具有指向您可以查看问题的页面的链接，但是该链接现在已断开，因此我已将其删除。

您的CSS搞砸了。max-width: 100%;在第814行删除，缩放控件将再次看起来不错。为了避免此类错误，请在CSS中使用更具体的选择器。

#myMap_canvas img {
    max-width: none;
}

为我修复了该问题，但我还想指出@Ben对问题的评论：“如果将is map_canvas用作地图div ID，则Bootstrap不会发生此问题”。他是对的。我没有使用Bootstrap，但是在更改div ID之后开始出现问题。

将其设置回map_canvas可以解决此问题，而无需更改最大宽度。

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

如果您使用的是Bootstrap，只需为其提供“ google-maps”类。这对我有用。

作为一种替代方法，您可以将Google Map div的所有内容重置为一种最后解决方法：

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;
}

只需分享@ Max-Favilli答案：

使用最新版的Google Maps API，您需要以下操作：

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

感谢@ Max-Favilli

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

如果您是Twitter Bootstrap用户，则应将此行添加到CSS：

.gmnoprint img { max-width: none; } 

我也有这个问题，并使用

.google-maps img {
    max-width: none;
}

没用。我最终用了

.google-maps img {
    max-width: none !important;
}

它就像一个魅力。

如果您使用的是Yahoo的Pure CSS，请为div提供类似于Bootstrap的“ google-maps”类，并将此规则放入CSS中：

.google-maps img {
    max-width: none;
    max-height: none;
}

据我所知，Pure CSS无法自行解决此问题。

你们告诉我的这些选项不适用于我的网站。

我使用Bootstrap V3并专注于功能。主要原因是我给地图指定了一个不同的ID，然后使用了与黄色的streetvieuw家伙一起显示缩放栏的CSS文件

我将map_canvas重命名为mapholder，然后对我有用！无论如何，感谢您提示我应该查看CSS文件的提示！

我尝试了上述所有解决方案，以及其他论坛的其他解决方案，均无济于事。这真的很烦人，因为我在另一个非Wordpress网站上代码运行良好。（我试图在Wordpress页面中显示Google地图，但是缩放和街景视图控件变形了）。

我所做的解决方案是创建一个新的html文件（将所有代码复制粘贴到记事本中，并将其命名为xyz.html，另存为“所有文件”类型）。然后将其上传/通过FTP上传到网站，并设置新的Wordpress页面并使用嵌入功能。编辑页面时，转到文本编辑器（而不是可视编辑器）并复制/键入：

http：//页面网址width =“ 900” height =“ 950”>

如果更改尺寸，请记住在以上两个参数中都进行更改，否则会得到奇怪的结果。

我们走了-可能不像其他答案那么聪明，但这对我有用！此处的证据：http：//a-bc.co.uk/latitude-longitude-finder/