Using DirectionsRenderer Get and Display A Route

[kevinjavitz]

What is the best way to handle this? Is there anyway to show the DirectionsRenderer https://developers.google.com/maps/documentation/javascript/directions on the React Map?

This is what copilot is giving me with this note:

Please note that this code assumes that you want to create a route from the first marker to the last marker in your markers array. If you want to create routes between all markers, you would need to make multiple requests to the Directions API and store multiple polyline paths.

It seems quite difficult then to have to make multiple calls for all the polyline paths

import React, { useState, useEffect } from 'react';
import { GoogleMap, Polyline, useGoogleMaps } from '@vis.gl/react-google-maps';

// ...

const [polylinePath, setPolylinePath] = useState([]);

// ...

const { maps } = useGoogleMaps();

useEffect(() => {
  if (!maps || markers.length < 2) return;

  const directionsService = new maps.DirectionsService();

  directionsService.route(
    {
      origin: markers[0].position,
      destination: markers[markers.length - 1].position,
      travelMode: maps.TravelMode.DRIVING,
    },
    (result, status) => {
      if (status === maps.DirectionsStatus.OK) {
        const polylinePath = result.routes[0].overview_path;
        setPolylinePath(polylinePath);
      } else {
        console.error(`error fetching directions ${result}`);
      }
    }
  );
}, [maps, markers]);

// ...

<GoogleMap
  id='direction-example'
  mapContainerStyle={{
    height: "400px",
    width: "800px"
  }}
  zoom={2}
  center={{
    lat: 0, lng: -180
  }}
>
  {
    polylinePath.length > 0 &&
    <Polyline
      path={polylinePath}
      options={{
        strokeColor: "#FF0000",
        strokeOpacity: 1.0,
        strokeWeight: 2,
      }}
    />
  }
</GoogleMap>

[usefulthink]

There's an example for this here: https://visgl.github.io/react-google-maps/examples/directions
I just noticed it's missing the panel with the links, use these:

• Source
• CodeSandbox