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

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

With regard to:

the rest of the map should be darkened a little bit.

This can be done with with Maps API v3 using Styled Maps.

There's even a Styled Maps Wizard where you can play with the settings, and then press Show JSON to get the array to pass as the first argument to new google.maps.StyledMapType.

To get the effect you want just reduce the Lightness for everything, in the wizard you'll want to see this in the Map Style box on the right:

Feature type:   all
Element type:   all
Lightness:  -70

Which will export to:

[
  {
     "stylers": [
      { "lightness": -70 }
    ]
  }
]

And look like this.

Answer 3

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/