CODEWITHSUNDEEP
javascripthtmlcssgoogle-maps
fancy
fancy

Reputation: 51353

Can google maps have a transparent bg?

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.

Upvotes: 7

Views: 8679

Answers (2)

VerticalGrain
VerticalGrain

Reputation: 570

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

Upvotes: 12

Tim M.
Tim M.

Reputation: 54359

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>

Upvotes: 2

Related Questions