Geek Answers Handbook

Google map overlay layer

I am trying to put a layer on top of my google maps to hide it. There should not be any interaction with google maps, this is just one layer on top of another.

what I have now:

<div id="map"> <div id="overlay"></div> </div>

on the div map, I put my google maps, and the overlay layer has a background the size of a div div, but google maps continue to overlap on top.

Any idea what I can do about this?

+6
css google-maps
source share
2 answers

The API will overwrite anything inside the DIV that you assign to the map as a container. To cover the map, you need to place your overlay div outside the map div with the position: absolute

+10
source share

The Google V3 Maps API supports the noClear option:

If true, do not clear the contents of the map div.

Use it as:

 var myLatlng = new google.maps.LatLng(-34.397, 150.644); var myOptions = { zoom: 8, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP, noClear: true, }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

However, semantically, it is better to place the overlay div # as the next sibling of the div div, as @Marcelo suggests.

+11
source share

More articles:


All Articles