如何更改InfoWindow背景颜色

时间:2016-05-26 09:21:16

标签: google-maps google-maps-api-3 infowindow

我正面临问题,我的谷歌地图API显示默认的InfoWindow,背景颜色为白色。我想将白色改为黑色。 REF CODE:

google.maps.event.addListener(marker, 'mouseover', function() {


    infoWindow.setContent(html);
        infoWindow.open(map, marker);
               //infoWindow.setStyle("background-color: red");


      });

3 个答案:

答案 0 :(得分:12)

我提出了一个简单的解决方案。这可能不是一个非常优雅的解决方案,但如果您不具备巨大的样式需求,它可以正常工作。

因为我们可以添加自己的html和样式。标记背景元素主要是导致问题的元素。对于简单的样式,我们可以使用jQuery删除该元素,而不是学习一个全新的库。

在init函数中插入此代码,它将删除背景元素。

google.maps.event.addListenerOnce(map, 'idle', function(){
    jQuery('.gm-style-iw').prev('div').remove();
}); 

现在,您可以自由设计自己的div。我使用这种方法在项目中设置了infoWindow。 enter image description here

希望它会有所帮助。

答案 1 :(得分:3)

您可以使用Google Maps Utility中的信息框

此类的行为类似于google.maps.InfoWindow,但它支持高级样式的其他几个属性。 InfoBox也可以用作地图标签。

您还可以使用 CSS 来设置样式。通过选中此tutorialthis,它会为您提供有关如何执行此操作的示例代码。

答案 2 :(得分:1)

这对我有用

.gm-style .gm-style-iw-d::-webkit-scrollbar-track, 
.gm-style .gm-style-iw-d::-webkit-scrollbar-track-piece,
.gm-style .gm-style-iw-c,
.gm-style .gm-style-iw-t::after { 
  background: red;
}