CODEWITHSUNDEEP
javascriptgoogle-mapsoverlay
Nilesh
Nilesh

Reputation: 6155

How to only a certain area visible while using Google Maps API?

Please see the following image. I want to be able to specify polygon/polyline so that the only area covered by it is visible. So far I have found methods to specify overlay so that specific portion on google maps is overlayed. I want the exactly opposite.

enter image description here

I tried adding a rectangle overlay over the current visible area to get the greyed out effect. Then I added the polygon overlay. My idea was if I add transparent polygon, it should reveal the map below it. It didn't work though. Any idea on how this can be done?

Upvotes: 0

Views: 1099

Answers (1)

Anto Jurković
Anto Jurković

Reputation: 11258

Solution to this problem could be similar to I want to create a Donut with Javascript API V3(Empty space inside like a hole).

See also example at jsbin.

You have to define two paths "in different directions". Outer path could be defined using coordinates from map.getBounds(). Inner path is your polygon.

Upvotes: 1

Related Questions