Handle and visualize the Isochrones API response

The Isochrones API returns geometry in the standard GeoJSON format. The response contains a MultiPolygon geometry object.

Reachable isochrone areas are not always contiguous single shapes. For example, a bridge often allows access to an island, creating a reachable area separated from the mainland. Additionally, inaccessible pockets, such as a private gated community or a lake, create holes inside the main polygon.

The following example shows a typical response format. Note that GeoJSON adheres to the [longitude, latitude] coordinate order.

{
  "isochrone": {
    "geoJson": {
      "type": "MultiPolygon",
      "coordinates": [
        [
          [
            [-122.332100, 47.606200],
            [-122.332200, 47.606300],
            ...
          ]
        ]
      ]
    }
  }
}

Visualize the isochrone on a map

Because the API returns standard GeoJSON, you can visualize the response using the Maps JavaScript API. The google.maps.Data class natively supports GeoJSON, which means you don't need to manually reverse the [longitude, latitude] coordinate order.

The following JavaScript snippet demonstrates how to add the API response directly to a map:

// Assume 'map' is an initialized google.maps.Map object
// and 'response' is the JSON payload returned by the Isochrones API.

const isochroneGeoJson = response.isochrone.geoJson;

// Add the GeoJSON directly to the map's data layer
map.data.addGeoJson(isochroneGeoJson);

// Optional: Apply custom styling to the isochrone polygon
map.data.setStyle({
  fillColor: '#4285F4',
  fillOpacity: 0.3,
  strokeColor: '#4285F4',
  strokeWeight: 2
});