Google Maps. Overlay over map excluding the area

Question

I'm using the Google Maps JavaScript API and I have to gray out the whole map excluding two dots on the map (ideally the line between two dots). The dot itself it's a GM coordinates.

As result I expect something similar with image below:

possible duplicate of [Polygon of world map with a hole (google maps)](http://stackoverflow.com/questions/27399025/polygon-of-world-map-with-a-hole-google-maps) — geocodezip, Mar 09 '16 at 18:32
possible duplicate of [Google Map API v3 shade everything EXCEPT for polygon](http://stackoverflow.com/questions/11130323/google-map-api-v3-shade-everything-except-for-polygon) — geocodezip, Mar 09 '16 at 18:33
Thank you for this examples. Extremely useful. Sorry for duplicates. — kirill.buga, Mar 09 '16 at 18:39

score 1 · Answer 1 · answered Mar 09 '16 at 18:24

I can give you a hint. If you array<array<LatLng>> to Polygon, you can make a hole polygon.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style type="text/css">
    #map_canvas {
      width: 600px;
      height: 400px;
      border: 1px solid gray;
    }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?language=ja"></script>
    <script>
      function initialize() {
        var mapDiv = document.getElementById("map_canvas");
        var map = new google.maps.Map(mapDiv, {
          mapTypeId : google.maps.MapTypeId.ROADMAP
        });
        var paths = [[
          {lat: 41.795692, lng: 140.756214},
          {lat: 41.795492, lng: 140.756150},
          {lat: 41.794700, lng: 140.757051},
          {lat: 41.795556, lng: 140.757813},
          {lat: 41.795764, lng: 140.757759},
          {lat: 41.796140, lng: 140.758349},
          {lat: 41.796044, lng: 140.758628},
          {lat: 41.796468, lng: 140.759819},
          {lat: 41.797283, lng: 140.759014},
          {lat: 41.797243, lng: 140.758746},
          {lat: 41.797811, lng: 140.758478},
          {lat: 41.797915, lng: 140.758714},
          {lat: 41.798995, lng: 140.758532},
          {lat: 41.798611, lng: 140.757158},
          {lat: 41.798459, lng: 140.757105},
          {lat: 41.798403, lng: 140.756343},
          {lat: 41.798587, lng: 140.756246},
          {lat: 41.798763, lng: 140.754884},
          {lat: 41.797795, lng: 140.754959},
          {lat: 41.797667, lng: 140.755152},
          {lat: 41.797067, lng: 140.754970},
          {lat: 41.797035, lng: 140.754648},
          {lat: 41.796180, lng: 140.753993},
          {lat: 41.795892, lng: 140.755302},
          {lat: 41.796004, lng: 140.755517}
        ], [
          {lat: 41.79873502198214,lng: 140.75676172883607},
          {lat: 41.79916701538921, lng: 140.75850996560666},
          {lat: 41.79914485048169, lng: 140.7587355674591},
          {lat: 41.7990097958377,  lng: 140.75889128372955},
          {lat: 41.79765499919136, lng: 140.75906845767213},
          {lat: 41.796517596211274,lng: 140.76016803505706},
          {lat: 41.796368000728584,lng: 140.76021618650816},
          {lat: 41.79622196495789, lng: 140.76011429828645},
          {lat: 41.795668,         lng: 140.75844600000005},
          {lat: 41.79445009984378, lng: 140.75732211342245},
          {lat: 41.794408009120424,lng: 140.75713163558203},
          {lat: 41.79443604749871, lng: 140.75693313624572},
          {lat: 41.79504399484126, lng: 140.75620355952447},
          {lat: 41.79469004147552, lng: 140.7551119011191},
          {lat: 41.79468803224198, lng: 140.7549643802871},
          {lat: 41.794772,         lng: 140.75484099999994},
          {lat: 41.795688013079555,lng: 140.75483010185235},
          {lat: 41.79588801219829, lng: 140.75383221957395},
          {lat: 41.796148,         lng: 140.75363900000002},
          {lat: 41.79740700714976, lng: 140.75463119510653},
          {lat: 41.798787067556184,lng: 140.75458362698373},
          {lat: 41.79894300457668, lng: 140.7547121759186},
          {lat: 41.79898498098061, lng: 140.75494811176304},
          {lat: 41.79872702373399, lng: 140.7566860846557}
        ], [
          {lat: 41.79509359115337, lng: 140.7559088009109},
          {lat: 41.795123461144776, lng: 140.75608584124757},
          {lat: 41.79546948885738, lng: 140.7556779973297},
          {lat: 41.79554756063853, lng: 140.7555651964035},
          {lat: 41.795647713509155, lng: 140.7550391871414},
          {lat: 41.794831758258425, lng: 140.75507730157472}
        ]];
        // Draw polygon
        var polygon = new google.maps.Polygon({
          paths: paths,
          map: map,
          strokeColor: "blue",
          strokeWeight: 2,
          fillColor: "red",
          fillOpacity: 0.75
        });

        var bounds = new google.maps.LatLngBounds();
        polygon.getPath().forEach(function(position) {
          bounds.extend(position);
        });

        map.fitBounds(bounds);
      }
      google.maps.event.addDomListener(window, "load", initialize);
    </script>
  </head>
  <body>
    <div id="map_canvas"></div>
  </body>
</html>

Thank you for your answer. Yes, it's possible to draw a polygon, but the thing that I don't know how to *exclude* the polygon from the overlay. — kirill.buga, Mar 09 '16 at 18:37
Try your self at first based on my code (or others). You can know the bounds of the map using `map.getBounds()`. Then you need to create array of LatLng from the bounds for polygon outer. — wf9a5m75, Mar 09 '16 at 18:41

Google Maps. Overlay over map excluding the area

1 Answers1