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.m         


        

Answer 1

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.

Answer 2

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.