Search code examples
google-mapsgoogle-maps-api-3google-maps-static-api

Google Maps Static API not rendering last path of polygon


I have a software that allows users to define certain boundaries in a map. In order to accomplish that I use the drawing functionality of GoogleMaps. Once the user's finished drawing the boundaries I get and encode the path to store it. If I edit that same record, it works perfectly. The boundaries are correctly generated. I decode the encoded path and set it to a bounds variable that generates the drawing on the map. But if I try to send the exact same path to Google Maps Static API, it doesn't work. The last path is always blank.

This is the code used to load the encoded path into the map using the regular API (it is working properly):

let bounds = new google.maps.LatLngBounds();
let decodedArray = google.maps.geometry.encoding.decodePath(EncodedPath);
this.selectedOverlay = new google.maps.Polygon({ paths: decodedArray });

this.selectedOverlay.setMap(this.map);
this.selectedOverlay.getPath().forEach((element: google.maps.LatLng) => {
    bounds.extend(element);
});
this.map.setCenter(bounds.getCenter());

This is the map generated by the regular API: enter image description here

This is the map generated by the static API: enter image description here

This is the URL to generate the map:

https://maps.googleapis.com/maps/api/staticmap?key=[api_key_here]&size=709x470&path=weight:2|fillcolor:0x00000040|color:0x000000aa|enc:ebxwFnxsbMbGxDpFwPkG{D

As you can see the last path is blank. I tested with several different polygons, all with the same result! The last path is always blank...

Any ideas on how to fix that?

I've read a lot of questions here but most (if not all) were related to a double backslash, which is not my case (see the generated URL).

Thanks!


Solution

  • The bound of the polygon is exactly the path you gave it:

    encoded path

    If you want it to enclose the array, make a closed path:

    https://maps.googleapis.com/maps/api/staticmap?size=709x470&path=weight:2|fillcolor:0x00000040|color:0x000000aa|enc:ebxwFnxsbMbGxDpFwPkG{DiFxP
    

    static map with full path

    The solution was one answer from 2013: Polygons are not closed

    As commented, adding the first item of the polygon as the last one fixes the issue.