polygonsgoogle-maps-static-api

How can I create a Polygon with a hole inside in Google Static Maps API?

When I try to create an outer polygon with a hole inside with Static Maps API, the fill color fills the inner polygon, and I see no parameters to draw this. This is how it looks: Fail of polygon with hole

this is the request: https://maps.googleapis.com/maps/api/staticmap?size=640x640&maptype=roadmap&zoom=16&path=color:0xFF0000AA|weight:3|fillcolor:0xFFB6C1BB|enc:csr{FcgiLuSm[rYua@zIvHvCdNcAzKmRhX&path=color:0xFF0000AA|weight:3|enc:mjr{FsjjL{A}D}E|DxAvD~EwD

Solution

  • As this is currently a feature that is not possible with Static Maps API, I've come with a workaround that achieves the "hole effect":

    1) Define the outer and inner lines of the polygon without any 'fillcolor', like this example: https://maps.googleapis.com/maps/api/staticmap?size=640x640&maptype=roadmap&zoom=16&path=color:0xFF0000AA|weight:3|enc:csr{FcgiLuSm[rYua@zIvHvCdNcAzKmRhX&path=color:0xFF0000AA|weight:3|enc:mjr{FsjjL{A}D}E|DxAvD~EwD enter image description here

    2) Create a polygon that removes a portion of the outer polygon and of the inner polygon, creating like a packman. Set the weight to zero 'weight=0' and choose a color to fill, like in this example: https://maps.googleapis.com/maps/api/staticmap?size=640x640&maptype=roadmap&zoom=16&&path=color:0x0ea001AA|weight:0|fillcolor:0xFFB6C1BB|enc:csr{FcgiLuSm[rYua@zIvHvCdNcAzKwIeI{A}D}E|DxAvDu@v\ Big portion of filling 3) Analogously to step 2, create the portion that we lack of the filled polygon, like in this example: https://maps.googleapis.com/maps/api/staticmap?size=640x640&maptype=roadmap&zoom=16&path=color:0x0ea001AA|weight:0|fillcolor:0xFFB6C1BB|enc:csr{FcgiLlRiXwIeI_FvDu@v\ Last portion of filling 4) Finally stitch all the paths together to simulate the desired hole: https://maps.googleapis.com/maps/api/staticmap?size=640x640&maptype=roadmap&zoom=16&path=color:0xFF0000AA|weight:3|enc:csr{FcgiLuSm[rYua@zIvHvCdNcAzKmRhX&path=color:0xFF0000AA|weight:3|enc:mjr{FsjjL{A}D}E|DxAvD~EwD&path=color:0x0ea001AA|weight:0|fillcolor:0xFFB6C1BB|enc:csr{FcgiLuSm[rYua@zIvHvCdNcAzKwIeI{A}D}E|DxAvDu@v%5C&path=color:0x0ea001AA|weight:0|fillcolor:0xFFB6C1BB|enc:csr{FcgiLlRiXwIeI_FvDu@v%5C Polygon with hole effect

    There is a Polyline encoder-decoder utility that can help you to see all the process at https://developers.google.com/maps/documentation/utilities/polylineutility