fixed transparent image overlay whole google map div

Question

I want to achieve something like this : Adding transparent overlay on google map

Basically I need the image on top of the map to be fixed on top of the map div, but still be able to drag and have all actions available on the map.

I found a solution with the css3 hack pointer-events to none. and my code looks like this :

<div id="overlayMap"></div> //the div with a transparent png background that I set the pointer-events: none;
<div id="map"></div>

But that isn't perfect since it's not working in all IE versions as well as in Opera : https://developer.mozilla.org/en-US/docs/CSS/pointer-events

and I also found this: Google Maps transparent image overlay

but this isn't exactly what I need since I want the whole image to cover the map.

Is there any way to achieve this with the google map API ?

nicoabie nicoabie · Accepted Answer · 2013-01-22T15:11:38

You can do something like

function setOpacityLayerAcrossWholeMap(map) {
    new google.maps.Rectangle({
        fillColor: 'grey',
        fillOpacity: 0.65,
        map: map,
        bounds: new google.maps.LatLngBounds(
    new google.maps.LatLng(-90, -180),
    new google.maps.LatLng(90, 180))
    });
}

I have done it myself and works, hope it is what you are looking for!

fixed transparent image overlay whole google map div

1 Answers