谷歌地图缩放控制搞砸了

时间:2012-01-16 11:45:48

标签: javascript css google-maps

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

enter image description here

更新

此帖最初有一个指向您可以查看问题的页面的链接,但链接现在已被破坏,所以我已将其删除。

9 个答案:

答案 0 :(得分:109)

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

答案 1 :(得分:80)

#myMap_canvas img {
    max-width: none;
}

为我修复了它,但我也想通过@Ben指出对问题的评论,“如果使用is map_canvas作为map div id,则Bootstrap不会发生这个问题”。他是对的。我没有使用Bootstrap,但是在我更改div id之后问题就开始了。

将其设置回map_canvas会修复它,而不会更改最大宽度。

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

答案 2 :(得分:21)

如果您正在使用Bootstrap,请将其命名为“google-maps”类。这对我有用。

作为替代方案,您可以重置谷歌地图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;
}

答案 3 :(得分:16)

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

答案 4 :(得分:5)

如果您是Twitter Bootstrap用户,则应将此行添加到CSS中:

.gmnoprint img { max-width: none; } 

答案 5 :(得分:4)

我也有这个问题并使用

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

没用。我最终用了

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

它就像一个魅力。

答案 6 :(得分:2)

如果您正在使用Yahoo的Pure CSS,请将您的div设为Bootstrap之类的“google-maps”类,并将此规则放入CSS:

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

据我所知,Pure CSS无法自行修复此问题。

答案 7 :(得分:0)

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

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

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

答案 8 :(得分:0)

我尝试了以上所有解决方案,其他论坛的其他人都无济于事。它真的很烦人,因为我有另一个非Wordpress网站,代码完美无缺。 (我试图在Wordpress页面中显示Google地图,但缩放和街景视图控件被扭曲了。)

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

http:// page URL width =“900”height =“950”&gt;

如果您更改尺寸,请记住在上面的两个参数中更改它,否则会得到奇怪的结果。

我们走了 - 可能不像其他一些答案一样聪明,但它对我有用!证据在这里:http://a-bc.co.uk/latitude-longitude-finder/