Highlight polygon and tint rest of map using Google Maps

Question

Hi,

I'd like to display a highlighted polygon using Google Maps. The idea is that the polygon in question would be displayed normally and the rest of the map should be darkened a little bit.

Here's an example image what I would like to accomplish with a polygon from Austria:

Unfortunately, I'm a complete rookie when it comes to Google Maps API's and map stuff in general.

So, is this even possible do this with Google Map API's? If yes, with what version (v2, v3)? Would it be easier to do it with other map toolkits, like openlayers?

PS: One idea I had, was to build an inverse polygon (in this example, the whole world minus the shape of austria) and then display a black colored overlay with transparency using this inverted polygon. But that seems to be quite complicated to me.

Answer 1

Google Maps API v3 lets you draw polygons with holes. Here's Google's Pentagon example. It is much easier than trying to invert a polygon. Basically, create coordinates for a giant polygon that is bigger than you would ever need. That will always be the first polygon in your polygon array. The area you are highlighting will always be the second polygon.

Here's some code to change Google's Bermuda Triangle demo to use a polygon with a hole:

  var everythingElse = [
    new google.maps.LatLng(0, -90),
    new google.maps.LatLng(0, 90),
    new google.maps.LatLng(90, -90),
    new google.maps.LatLng(90, 90),
  ];



  var triangleCoords = [
    new google.maps.LatLng(25.774252, -80.190262),
    new google.maps.LatLng(18.466465, -66.118292),
    new google.maps.LatLng(32.321384, -64.75737),
    new google.maps.LatLng(25.774252, -80.190262)
  ];




  bermudaTriangle = new google.maps.Polygon({
    paths: [everythingElse, triangleCoords],
    strokeColor: "#000000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#000000",
    fillOpacity: 0.5
  });

  bermudaTriangle.setMap(map);