Can google maps have a transparent bg?

Question

Can google maps have a transparent bg? I've been messing with the paramaters but can't find a solution. I'm using the JS API.

Thanks.

Answer 1

There is a way to give the map a transparent background with Google Maps API V3. The MapOptions object has a property called backgroundColor, which sets the background colour of the map. If you use an HSLA color value, you can control the opacity of this background colour to create the transparency.

var mapOptions = {
zoom: 1,
styles: mapStyles,
backgroundColor: 'hsla(0, 0%, 0%, 0)',
};

In addition to setting this color, you also need to use some map styles to hide the water (or whatever you want to be transparent).

Here is a codepen demonstrating the effect: http://codepen.io/verticalgrain/pen/LVRezx

Answer 2

This appears to be possible by setting the opacity with CSS to a value less than 1. All modern browsers support opacity either natively or with a proprietary directive.

<!-- The container to which the map is rendered by the Google JS library -->
<div id="mapContainer" style="opacity:0.5"></div>