使用Google Maps API v3时，InfoWindow图形“混乱”

Question

在按照Google文档中的示例代码设置并居中地图后，我只是在地图上放置了一个标记，使用geocoder并在其上放置了一个信息窗口，如下所示：

geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
        var marker = new google.maps.Marker({
            position: results[0].geometry.location,
            map: map,
            title: title
        });
        google.maps.event.addListener(marker, 'click', function () {
            console.log('openInfoWindow');
            infoWindow.setContent(content);
            infoWindow.open(map, marker);
        });
    };
});

content只是一个HTML链接，address是一个有效的地址（因为我没有问题显示标记）。

如您在此图片中所见，我有一个小的图形问题: 就像css sprite全都乱了。我不知道这个问题来自哪里，已经研究了一段时间，我感到很烦恼......任何猜测在这一点上都是有帮助的。 Webkit（Safari和Chrome）和Firefox中的屏幕截图是相同的。

- Alexandre Testu

---

<Ctrl>+<F5> 有帮助吗？ - mkilmanas

@mkilmanas 我试过了，很多很多次。我也清除了缓存。 - Alexandre Testu

奇怪。也许你应该再检查一下是否有冲突的CSS声明（即相同的ID或类）-这不太可能，但仍然值得检查。 - mkilmanas

Answer 1

这篇文章有些老了，但是在 GitHub Issue 里面可以找到更普遍的解决方案。

img[src*="gstatic.com/"], img[src*="googleapis.com/"]  {
    max-width: 99999px;
}

- fdot

---

确实，这解决了引导问题！ - RushPL

非常感谢！我也遇到了同样的问题，真是让人烦恼 :p - Victor Parmar

Answer 2

就像mkilmanas所猜测的那样，它是由于CSS声明冲突引起的。我的CSS文件中有以下内容：

img {
  max-width: 300px;
}

我完全意识到那是多么愚蠢。非常感谢mkilmanas。

- Alexandre Testu

---

当我试图在Twitter的Bootstrap CSS框架内使用Google Maps时，我遇到了完全相同的问题。由于某种原因，他们在bootstrap.css中设置了max-width: 100%;。在我的地图容器范围内覆盖img的CSS定义解决了所有问题。 - broox

我也曾经有过Twitter bootstrap的相同经历。相关问题可以参考：https://github.com/twitter/bootstrap/issues/3575。 - sunsations