Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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.

update:

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?

update2:

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:

setTimeout(function(){ 
        $("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.

share|improve this question

2 Answers 2

up vote 16 down vote accepted

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

enter image description here

The code from Vasile is on github.

share|improve this answer
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 Jan 16 '12 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 Jan 16 '12 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 Jan 16 '12 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 Jan 17 '12 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} ?????????????? –  user1845528 Nov 22 '12 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

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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