Google maps 谷歌地图API V3：奇怪的用户界面显示故障（带屏幕截图）

任何对谷歌地图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);

var选项={
缩放：，
中心：新google.maps.LatLng（，），
mapTypeControl:false，
mapTypeId:google.maps.mapTypeId.ROADMAP
}; 
var map=new google.maps.map（document.getElementById（'map_canvas'），选项）；

---

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

看起来缩放控制有问题。尝试将

zoomControl:false

添加到选项中

---

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

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

style.css

img {max-width: 100%; }

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

style.css:

#map_canvas img { max-width: none; }

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

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

---

设置“img最大宽度：100%”是一种在响应性/流畅性网站设计中采用的技术，以便在重新调整浏览器大小时，图像按比例重新调整大小。显然，一些css网格系统已经开始默认设置这种样式。关于流体图像的更多信息：不确定这与谷歌地图冲突的原因…

我得到了解决方案：

在CSS上添加了如下内容：

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

---

尽量不要让它全球化，它应该会解决您的问题：）

使用最新版本的谷歌地图api，您需要：

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

.gm样式img{最大宽度：无；}
.gm样式标签{宽度：自动；显示：内联；}

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

#map_canvas img { max-width: none; }

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

试试这个：

#map_canvas img { max-width: none; }

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

只需按原样替换代码。

引导程序（从2.3.2版开始）以与接受答案相同的方式处理图像

事实上，我怀疑Haroldo网站中使用的设计使用了引导

---

我之所以发布这篇文章，是因为没有人提到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>

html，正文，#地图画布{
高度：600px；
宽度：100%；
边际：0px；
填充：0px
}
#地图画布img{最大宽度：无；}

这对我很有用：

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

属性“！important”确保覆盖任何其他样式，#map是声明新对象GMAP时指定的id：

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

map=新的gmap({
div:“#map”，如果您添加了一个片段，说明如何声明它，那将非常有用component@slawekwin-更新的问题。确定找到了。这是由我的
img{max width:100%；}
我面临同样的问题，并在删除css img{max width:100%；}后进行了修复感谢这也影响了我。谷歌地图API v3使用了一个大尺寸的透明png精灵图像（
http://maps.gstatic.com/mapfiles/iw3.png
）它被放置在父容器中，溢出：隐藏。因此，限制图像的宽度会导致图像被压缩。这一个让我很难堪。非常感谢您发布此解决方案！您，先生，rock！从未想过。这与已接受的解决方案相同，但具有不同的选择器和额外的rese你自己的标签样式。这一个实际上有帮助