疯狂的谷歌地图信息窗口答案

【问题标题】：Crazy looking Google Maps Infowindow疯狂的谷歌地图信息窗口
【发布时间】：2012-04-04 21:23:29
【问题描述】：

我真的不知道如何解释这一点，图像几乎不言自明。在 Chrome、Firefox 和 Internet Explorer 上看起来相同。

我用的是jQuery Mobile，这和它有什么关系吗？

我的代码，使用 Google Maps API V3。

var myOptions = {
        center:new google.maps.LatLng(59.3474845, 18.0621677),
        zoom:15,
        mapTypeId:google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map"),
        myOptions);

    var marker = new google.maps.Marker({
        map:map,
        position:myOptions.center
    });

    var infowindow = new google.maps.InfoWindow({
        content: '<p>boooyah</p>'
    });
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map, marker);
    });

我的 CSS：

#map { height: 300px; width: 300px; }

【问题讨论】：

Google Map Infowindow not showing properly 的可能重复项
检查全局样式表，一定有一些东西已经应用到地图上。
非常感谢 Molle 博士。此线程与您链接的线程完全相同，它帮助解决了我的问题。

标签： google-maps google-maps-api-3 google-maps-markers

【解决方案1】：

最近遇到这个问题。

这是由 css 中的img{max-width:XXX} 引起的。不知道为什么，但是从 css 中删除 max-width 会修复渲染。

【讨论】：

【解决方案2】：

信息窗口的“语音气泡”效果是由 google 的 API 使用一系列 div 元素创建的。你可能会用 css 打破这个 - 尝试关闭页面上的样式，看看它是否仍然发生。

【讨论】：

我更新给你看我唯一的 css。我还使用 Chrome 调试器进行了调试，检查了元素，没有发现任何异常。
@SoroushHakami 如果您使用 Firefox 的 webdeveloper 工具栏，您可以通过单击关闭所有样式。正如你所说，它可能不是这种情况下的样式，但无论如何它可能值得检查。来自全局样式的意外干扰是导致人们在使用此 API 时遇到许多问题的原因。

【解决方案3】：

问题应该是因为通用img{max-width: 100%;}

在你的 CSS 中试试这个

.gmnoprint img {
    max-width: none; 
}

【讨论】：