谷歌地图缩放控制搞砸了答案

【问题标题】：Google Maps zoom control is messed up谷歌地图缩放控制搞砸了
【发布时间】：2012-02-11 08:48:02
【问题描述】：

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

更新

这篇文章最初有一个链接到您可以查看该问题的页面，但该链接现在已损坏，因此我已将其删除。

【问题讨论】：

如果您使用的是 map_canvas 作为地图 div id，则 Bootstrap 不会发生此问题。

标签： javascript css google-maps

【解决方案1】：

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

【讨论】：

如果你使用 Twitter 的 Bootstrap 也是如此，他们有一个 img { max-width:100%} 会搞砸。它应该在 2.0.2 分支中修复
许多 CSS 重置文件也设置了img {max-width:100%;}。
太棒了！我也遇到了这个问题，我最近才开始使用 bootstrap css。穆乔++++
与 jquery mobile 有同样的问题。他们的 css 中有 .ui-mobile img {max-width: 100%;}，必须删除。
要在引导程序中解决这个问题，只需给您的地图 div 类 google-maps

【解决方案2】：

#myMap_canvas img {
    max-width: none;
}

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

将其设置回 map_canvas 修复了它，而没有更改最大宽度。

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

【讨论】：

【解决方案3】：

如果您使用的是 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;
}

【讨论】：

【解决方案4】：

分享@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

【讨论】：

【解决方案5】：

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

.gmnoprint img { max-width: none; }

【讨论】：

【解决方案6】：

我也遇到了这个问题，正在使用

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

没用。我最终使用了

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

它就像一个魅力。

【讨论】：

!important 如果您的选择器更具体，则可能不需要。

【解决方案7】：

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

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

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

【讨论】：

【解决方案8】：

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

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

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

【讨论】：

【解决方案9】：

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

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

http://页面网址 width="900" height="950">

如果你改变尺寸，记得在上面的两个参数中改变它，否则你会得到奇怪的结果。

我们开始了 - 可能不像其他一些答案那么聪明，但它对我有用！证据在这里：http://a-bc.co.uk/latitude-longitude-finder/

【讨论】：