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.
Solution 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
Solution 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 --><divid="mapContainer"style="opacity:0.5"></div>
Post a Comment for "Can Google Maps Have A Transparent Bg?"