What i am looking for is a way to emphasize a certain area on a Google Maps map by graying out the rest of the world.

I heard about some solution of using 2 polygons of which 1 is visible and the other not and that it only works if the map is static (no map movement). However i want the user to be able to zoom and drag the map.

I am also interested in other ways i haven't thought of to emphasize an area.


When i try the solution posted by radek (i.e. creating a KML with a Polygon with an outerBoundaryIs (bigger than view) and an innerBoundaryIs (being area to emphasize)) I get the problem that when i zoom in, rectangular areas are not covered by the surrounding polygon anymore. See:

enter image description here

Anyone with experience/solution to that?


I finally had time to test radek's solution using Google Fusion Tables. At first i had the same issues with missing tiles as with KML (see picture above), but after another load it seems like it had picked up and it was showing the tiles totally correct. I have a feeling that the jquery hack in his solution was meant for tiles that weren't loading:

        $("img[src*='googleapis']").each(function() { 
            $(this).attr("src",$(this).attr("src")+"&"+(new Date()).getTime()); 
    }, 5000);

As the tiles seemed to load after a refresh i haven't used the hack myself. If the bug happens for every new user I will experiement with it.

2 Answers 2


Google Maps Mania blog points to example of Swiss Administrative Boundaries Map:

enter image description here

The code from Vasile is on github.

  • 1
    This does indeed display the functionality i am looking for! I will have to dive into the source to see if it is easily implementable in my case. They are talking about hacks (i immediately get IE7 fears).
    – mrg
    Commented Jan 16, 2012 at 12:29
  • Is the use of Google Fusion Tables a must in this example? I'm not using that at the moment. I will download the github code and check what the requirements are.
    – mrg
    Commented Jan 16, 2012 at 15:21
  • 2
    It comes down to making a Polygon in KML with an outerBoundaryIs, being the world and an innerBoundaryIs, being your area of interest. Apart from having difficulty styling the transparancy i keep getting holes in my semi-transparent layer when i zoom in. Anyone have any experience with that?
    – mrg
    Commented Jan 16, 2012 at 22:09
  • 1
    KML's are rather slow in loading, so changing it all the time might give a very lazy effect. Apart from that wouldn't i have to change the name constantly to make sure the old kml doesn't get cached? I have a feeling that i need Google Fusion Tables knowledge.
    – mrg
    Commented Jan 17, 2012 at 18:13
  • 1
    Is there a simpler implementation, that can use a KML file instead of FusionTables? I only need to color-highlight 1 continuous area (city boundaries), and gray out everything else. I've looked at Vasile's code, but it's really complicated, and seems to depend on browser hacks. Also, if this solution can use elrobis's suggestion of making the map window the basis for the gray-out effect, I think it will be much more stable / faster. {draw a boundary around the city & color it} // done {gray out everything EXCEPT the area inside the boundary} ?????????????? Commented Nov 22, 2012 at 16:05

if the tool that @radek posted didn't help you, there is another one that is using plain google.maps.Polygon features: http://maps.vasile.ch/geomask/

Basically it's following the winding number algorithm: the mask(universe) polygon is digitized clock-wise and all the interior polygons are digitized counter-clock-wise http://en.wikipedia.org/wiki/Winding_number

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.