Google Maps API V3:奇怪的UI显示故障(带截图)

Question

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

即使没有标记,故障也是一样的.

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> Inspect Element).可能是CSS冲突吗？