useDirectionsService.md

useDirectionsService Hook

React hook to use the Google Maps Directions Service in any component.

Usage

import React from 'react';
import {useDirectionsService} from '@ubilabs/google-maps-react-hooks';

const MyComponent = () => {
  const {
    directionsService,
    directionsRenderer,
    findAndRenderRoute,
    setRouteIndex
  } = useDirectionsService(directionsOptions);

  // Do something with the directions

  return (...);
};

Parameters

DirectionsProps

Pass in whether to render on a Google Maps map or not and the DirectionsRendererOptions.

interface DirectionsServiceProps {
  renderOnMap?: boolean;
  renderOptions?: google.maps.DirectionsRendererOptions;
}

Return value

Returns an object with the following elements:

• directionsService instance
• directionsRenderer instance
• findRoute function, which returns a route
• findAndRenderRoute function, which also renders the route on the map
• renderRouteOfIndex function, which can be used to render a specific route of google.maps.DirectionsResult returned by findRoute or findAndRenderRoute

interface DirectionsServiceHookReturns {
  directionsService: google.maps.DirectionsService | null;
  directionsRenderer: google.maps.DirectionsRenderer | null;
  findRoute: ((request: google.maps.DirectionsRequest) => Promise<google.maps.DirectionsResult>) | null;
  findAndRenderRoute: ((request: google.maps.DirectionsRequest) => Promise<google.maps.DirectionsResult>) | null;
  renderRouteOfIndex: (index: number) => void;
}

NOTE: When using findAndRenderRoute, the renderOnMap property must be set to true.