Highlight polygon and tint rest of map using Google Maps

Question

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.

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);

Answer 2

USING GEOJSON

<div id="googleMap" style="width:500px;height:380px;"></div>

 // define map properties
    var mapProp = {
        center: new google.maps.LatLng(23.075984, 78.877656),
        zoom: 5,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
//create google map 
    var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

// define geojson
    var geojson = {
        "type": "FeatureCollection",
        "features": [{
            "type": "Feature",
            "geometry": {
                "type": "Polygon",
                "coordinates": [
                    [
                        [0, 90],
                        [180, 90],
                        [180, -90],
                        [0, -90],
                        [-180, -90],
                        [-180, 0],
                        [-180, 90],
                        [0, 90]
                    ],
                    [
                        [79.56298828125, 25.18505888358067],
                        [76.53076171875, 21.37124437061832],
                        [83.38623046875, 21.24842223562701],
                        [79.56298828125, 25.18505888358067]
                    ]
                ]
            },
            "properties": {}
        }]
    };
//add geojson to map
    map.data.addGeoJson(geojson);

incase of external geojson file use

map.data.loadGeoJson('url-to-geojson-file');

note: google used .json as extension for geojson file and not .geojson https://developers.google.com/maps/documentation/javascript/datalayer

create your geojson here
https://google-developers.appspot.com/maps/documentation/utils/geojson/

working example https://jsfiddle.net/841emtey/5/