CODEWITHSUNDEEP
javascriptjquerygoogle-maps
West55
West55

Reputation: 496

Place transparent overlay over entire google map (like a modal cover)

Hello as the title suggests

I have a map that for the most part fills the screen besides a navigation bar that hangs on the size absolute positioned.

When a marker is clicked I have an info box popping up with location information. I would like to put a black transparent layer behind this, over top of the map, to prevent map clicks until the close the information box.

I have tried to use custom overlays, mainly using another infobox to layer but in order to position the info box it is offsetting the top and left positions to meet the marker its supposed to cover.

So what I am stuck with right now is a black transparent box, 5000px by 5000px that appears to the bottom left of the pin.

Is there a way to set the overlay to match the google map canvas? top, left, right, bottom sides.

Upvotes: 1

Views: 649

Answers (2)

West55
West55

Reputation: 496

I ended up using jquery to set the top, left positions to 0 and moving the overlay to the map pane.

Upvotes: 0

putvande
putvande

Reputation: 15213

Maybe this could be a solution instead of using an overlay. You could turn off the controls so the user can't interact with the map.

If you use:

map.setOptions({draggable: false, 
        zoomControl: false, 
        scrollwheel: false, 
        disableDoubleClickZoom: true,
        streetViewControl: false,
        panControl: false,
        mapTypeControl:false});

You turn off the controls on your map. Where map is your map object. And whenever you close your infowindow you reverse this process to enable everything.

Upvotes: 1

Related Questions