Handle and visualize the Isochrones API response

The Isochrones API returns geometry in the standard GeoJSON format conforming to RFC 7946. The response always contains a MultiPolygon geometry object under isochrone.geoJson (isochrone.geo_json in gRPC):

• Coordinate order: Every position is a [longitude, latitude] pair in WGS 84 decimal degrees.
• Multiple polygons (coordinates[i]): Reachable isochrone areas can consist of multiple disjoint polygons (for example, when a high-speed bridge or tunnel connects to a separate reachable pocket, or when a polygon crossing the ±180° antimeridian is split along the meridian per RFC 7946 §3.1.9).
• Exterior shells and interior holes (coordinates[i][j]): Within each polygon coordinates[i], the first linear ring (coordinates[i][0]) is the exterior shell wound counterclockwise, and any subsequent linear rings (coordinates[i][1..k]) represent interior holes (such as lakes, parks, or unmapped pockets) wound clockwise per the RFC 7946 §3.1.6 right-hand rule. Every linear ring is closed (its first and last [longitude, latitude] positions are identical).

The following example shows a MultiPolygon response containing a main polygon with an interior hole and a second disjoint polygon:

{
  "isochrone": {
    "geoJson": {
      "type": "MultiPolygon",
      "coordinates": [
        [
          [
            [-122.340000, 47.600000],
            [-122.320000, 47.600000],
            [-122.320000, 47.615000],
            [-122.340000, 47.615000],
            [-122.340000, 47.600000]
          ],
          [
            [-122.334000, 47.604000],
            [-122.334000, 47.609000],
            [-122.328000, 47.609000],
            [-122.328000, 47.604000],
            [-122.334000, 47.604000]
          ]
        ],
        [
          [
            [-122.355000, 47.602000],
            [-122.348000, 47.602000],
            [-122.348000, 47.608000],
            [-122.355000, 47.608000],
            [-122.355000, 47.602000]
          ]
        ]
      ]
    }
  }
}

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 'responseData' is the parsed JSON payload returned by the Isochrones API.

const isochroneGeoJson = responseData.isochrone.geoJson;

// Wrap the geometry in a standard GeoJSON Feature
const geoJsonFeature = {
    type: "Feature",
    geometry: isochroneGeoJson,
    properties: {}
};

// Add the GeoJSON Feature to the map's data layer
map.data.addGeoJson(geoJsonFeature);

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