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

任何对google maps UI组件导致这种奇怪故障的原因有任何想法的人，非常感谢您的来信！

该地图是通过以下方式创建的：

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

即使没有标记，故障也一样。

我们遇到了同样的问题。CSS设计师正在使用以下样式：

style.css

img {max-width: 100%; }

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

style.css：

#map_canvas img { max-width: none; }

缩放控件现在可以正确显示。

设置“ img最大宽度：100％”是一种在响应/流体网站设计中使用的技术，以便在调整浏览器大小时按比例调整图像大小。显然，某些CSS网格系统已默认开始设置此样式。有关流动图像的更多信息，请访问：http : //www.alistapart.com/articles/fluid-images/ 不知道为什么这与Google地图冲突...

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

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

缩放控件似乎有问题。尝试添加zoomControl:false到您的选项。

实际上，正常的缩放滑块似乎位于页面左侧（使用Firebug>检查元素）。可能是CSS冲突？

好吧，我为此得到了解决：

在CSS上，您添加了以下内容：

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

尽量不要使其全球化，它应该可以解决您的问题：）

这为我工作：

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

如果您正在使用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%;
}

只需按原样替换代码即可。

Bootstrap（自2.3.2版开始）以与接受的答案相同的方式处理图像。

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

我之所以发布此内容，是因为没有人提到Bootstrap，并且有人可能正在寻找特定于Bootstrap的解决方案。

我在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>