Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 697
fancy Avatar asked Jan 04 '12 08:01

fancy


2 Answers

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

like image 172
VerticalGrain Avatar answered Sep 30 '22 01:09

VerticalGrain


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>
like image 31
Tim M. Avatar answered Sep 30 '22 01:09

Tim M.