Question

任何有关谷歌地图UI组件导致这种奇怪故障的任何想法的人都非常感谢您的来信！

enter image description here

使用以下内容创建地图：

        var options = {
        zoom: <?php echo $this->zoom ?>,
        center: new google.maps.LatLng(<?php echo $this->centre_lat ?>, <?php echo $this->centre_lon ?>),
            mapTypeControl: false,
            mapTypeId: google.maps.MapTypeId.ROADMAP                
        }; 

        var map = new google.maps.Map(document.getElementById('map_canvas'), options);

即使没有标记也会出现故障。

Answer 1

我们遇到了同样的问题。 css设计师正在使用这种风格：

style.css

img {max-width: 100%; }

我们没有禁用缩放控件，而是通过覆盖map_canvas元素的img样式来修复问题，如下所示：

<强>的style.css：

#map_canvas img { max-width: none; }

现在可以正确显示变焦控制。

设置“img max-width：100％”是在响应/流体网站设计中采用的技术，以便在重新调整浏览器大小时图像按比例重新调整大小。显然，一些css网格系统默认开始设置此样式。有关流体图像的更多信息，请访问：http://www.alistapart.com/articles/fluid-images/不确定为何与谷歌地图冲突......

Answer 2

使用最新版本的google maps api，您需要：

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

Answer 3

看起来像缩放控件有问题。尝试将zoomControl:false添加到您的选项中。

实际上，正常的缩放滑块似乎位于页面左侧（使用Firebug＆gt; Inspect Element）。可能是CSS冲突吗？

Answer 4

我得到了解决方法：

在CSS上添加了类似的内容：

img {max-width: 100%; height: auto;}

尽量不要让它全球化，它应该解决你：）

Answer 5

这对我有用：

#map img { max-width: none !important; } (from Patrick's answer)

属性“！important”确保覆盖任何其他样式，＃map是声明新对象Gmaps时分配的id：

<script>
    map = new GMaps({
          div: '#map',           <-  your id
          lat:  *******,
          lng:  *******,
          scrollwheel: false,
          panControl: true,
          ....
          ...
</script>

Answer 6

如果您使用的是Dreamweaver流体网格功能，则默认设置应如下所示：

img, object, embed, video {
    max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
    width:100%;
}

试试这个：

object, embed, video {
    max-width: 100%;
}
#map_canvas img { max-width: none; }
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
    width:100%;
}

只需按原样替换代码。

Answer 7

Bootstrap（从版本2.3.2开始）以与接受的答案相同的方式混淆图像。

事实上，我怀疑Haroldo网站上使用的设计使用Bootstrap。

我只是张贴这个，因为没有人提到过Bootstrap，有人可能正在寻找一个特定于Bootstrap的解决方案。

Answer 8

我在Square Space网站上遇到了这个问题。我没有访问CSS样式表。由于您要嵌入html文档，因此您可以使用内联CSS来解决问题。我修改了容器的样式，而不是进行站点更改（我无法做到）。这是我做的：

<style>
  html, body, #map-canvas {
    height: 600px;
    width: 100%;
    margin: 0px;
    padding: 0px
  }
  #map-canvas img {max-width: none;}
</style>

Google Maps API V3：奇怪的UI显示故障（带截图）

8 个答案: