www.webdeveloper.com
Results 1 to 5 of 5

Thread: Circular "hole" in Google Maps overlay

  1. #1
    Join Date
    Jan 2003
    Location
    Cardiff, Wales, UK
    Posts
    208

    Circular "hole" in Google Maps overlay

    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?

    Many thanks for reading this!

  2. #2
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    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...

    in chrome you can use an svg mask.

  3. #3
    Join Date
    Jan 2003
    Location
    Cardiff, Wales, UK
    Posts
    208
    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...

  4. #4
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    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...

  5. #5
    Join Date
    Nov 2010
    Posts
    1,049

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles