InfoWindow关闭图标未显示在Google地图中

Question

我使用此代码创建在单击标记后显示的标记和信息窗口：

// latLng and map are created earlier in code
 var marker = new google.maps.Marker({
        position: latLng,
        map: map
    });

// contentString is just a string with content also created earlier
google.maps.event.addListener(marker, 'click', function(){
        infowindow.setContent(contentString);
        infowindow.open(map, marker);
    });

除了一件事之外，这段代码产生的一切都很好，它不会在信息窗口的右上角显示关闭图标。

任何人都知道可能出现什么问题？

如果它有任何不同，我正在使用meteor.js

这就是我创建InfoWindow：

的方法

var infowindow = new google.maps.InfoWindow();

Answer 1

以下是问题的解决方案...... 似乎谷歌地图有一些处理图像的有趣方式，我们认为css存在问题。 因此解决方案只是将其添加到您的css文件中：

img 
{
    max-width: none;
}

就是这样，享受。

Answer 2

我遇到了同样的问题。在我的情况下，infowindow不显示指向标记的指针。在infowindow中也有一些奇怪的图像。

显然，这与bootstrap与谷歌冲突的样式表有关。以下是一个更具体的CSS，而不是覆盖一般的CSS

/** FIX for Bootstrap and Google Maps Info window styes problem **/
img[src*="gstatic.com/"], img[src*="googleapis.com/"] {
max-width: none;
}

Answer 3

根据其他CSS样式，您可能需要添加！important override ...

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

Answer 4

这可能会有点晚，但是对于那些正在寻找答案的人。解决方案是CSS覆盖。在CSS设置中查找以下css值：

.gm-ui-hover-effect{
    top: -27px !important;
    right: -3px !important;
    background: #ddd !important;
    border: 1px solid #000 !important;
    border-radius: 50%;
    width: 30px !important;
    height: 30px !important;
    opacity: 1;}
.gm-ui-hover-effect img{margin: -8px 6px !important;
    width: 16px !important;
    height: 16px !important;}
   .gm-style .gm-style-iw {
    width: 282px !important;
    left: 0px !important;
    padding-left: 10px;
}

使用这些替代，可以成功显示按钮（删除顶部和右侧的值），但是还可以格式化我想使用的关闭按钮类型。根据主题或系统上安装的其他插件，您的CSS值可能会有所不同。但是.gm_ui_hover-effect和.gm-ui-hover-effect是关键。

在此找到解决方案的线索： https://codepen.io/Marnoto/pen/xboPmG

结合使用Chrome中的“检查”选项。