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");


      });

Answer 1

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.