How to change the InfoWindow Background color

Question

I'm facing the problem,My google Map API showing default InfoWindow with background color white.I want change the White color to Black color. REF CODE:

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


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


      });

Duplicate: http://stackoverflow.com/questions/15140803/styling-infowindow-with-google-maps-api ? — Joachim Rohde, May 26 '16 at 09:59

Awais Umar · Accepted Answer · 2017-08-04T12:50:37.403

I came up with a simple solution. This might not be a very elegant solution but it works fine if you don't have huge styling needs.

Since we can add our own html and style it. The marker background element is mainly the one which causes problem. For simple styling, instead of learning a whole new library, we can just remove that element using jQuery.

Insert this code in your init function and it will remove the background element.

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

Now, you are free to style your own divs. I styled the infoWindow in my project using this approach.

Hope it will help.

Does this still work? I implemented it in a newer version of the maps api and it doesn't seem to get invoked — Barry Chapman, Jan 05 '19 at 04:01

score 8 · Answer 2 · edited May 07 '21 at 06:37

8

This works for me :

.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;
}

edited May 07 '21 at 06:37

Radon8472

4,285
1
33
41

answered Mar 14 '21 at 00:55

Andrew Forbes

81
1
4

Good, but there is still a reverse triangular in white at the bottom of infoWindow. So I also add the following .gm-style .gm-style-iw-tc::after { background: red; } – Yigit Pilevne Sep 09 '22 at 12:49
1

Also add the following `.gm-style .gm-style-iw-tc::after { background: red; }` – Lee Taylor Sep 24 '22 at 14:27

score 3 · Answer 3 · answered May 27 '16 at 08:02

3

You can use the InfoBox here in Google Maps Utility.

This class behaves like google.maps.InfoWindow, but it supports several additional properties for advanced styling. An InfoBox can also be used as a map label.

You can also use CSS to style it. By checking this tutorial and this, it will give you a sample code on how to do it.

answered May 27 '16 at 08:02

KENdi

7,576
2
16
31

3

The first link is broken, probably InfoBox [has been removed](http://stackoverflow.com/questions/37171426/google-maps-api-v3-infobox-js-removed). – T30 Nov 29 '16 at 14:50

How to change the InfoWindow Background color

3 Answers3

Linked