I've got a Google map that allows you to enter your postcode and shows results within a certain radius of that point - a very common application of the API.
I have it plotting a circle to represent the area covered (easy enough), but I'd like to "grey out" the map (e.g. by applying a semi-transparent layer over it) except for the area within the circle, which shows the map as normal.
I haven't found anything like this anywhere - is it even possible?
you won't be able to click the map underneath, but you can do it by laying a png over the map. just use rgba to make some areas clear and some (200,200,200,0.4) or something like that...
Thanks for the response! Nice in theory, but with the variety of different zoom levels, coupled with the fact the radius of the circle varies (they can choose different distances), that wouldn't really work - especially as the map needs to be clickable.
I was hoping there'd be a way of achieving it via the API - kind of like a filled circle, but the outside is filled rather than the inside...
svg is zoomable (vectors), and the mask would no block clicks like a png would.
not to be a wise guy, but you can resize a png just like any img tag...
Reply With Quote
Bookmarks