CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
Abhendra Singh
Abhendra Singh

Reputation: 1957

Create holes on overlay on google map

I want to create two google maps api overlays such that one overlay is containing another small overlay.And another small overlay should be transparent. Like a donut. But I could not create such shape because if I make inner overlay transparent then outer overlay fill the color. I want to make such type of shape on google map-I want to make such type of shape on google map-

It may be circle or polygon. I tried this but not working for me.

var populationOptions = {
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#FF0000",
      fillOpacity: 0.35,
      map: map,
      center: latlng,
      radius: 100000,
      editable: true,
      zIndex:100
    };
    cityCircle = new google.maps.Circle(populationOptions);

    var populationOptions1 = {
          strokeColor: "#FF0000",
          strokeOpacity: 0.8,
          strokeWeight: 2,
          fillColor: "#ccffcc",
          fillOpacity: 0.00,
          map: map,
          center: latlng,
          radius: 10000,
          editable: true,
          zIndex:1000
        };
        cityCircle1 = new google.maps.Circle(populationOptions1);

How to achieve this shape on google map that blue area will colored and white area will transparent? Thanks in advance..

Upvotes: 0

Views: 2506

Answers (1)

Abhendra Singh
Abhendra Singh

Reputation: 1957

Finally I found my answer. this link was very useful. It works for me...

Another example of a "donut" polygon, the key being the winding direction of the path of the inner "hole" path needs to be opposite that of the outer path.

Upvotes: 1

Related Questions