google-map-directions

To use the NPM package for Google Map directions in a React application, users can follow these steps:

1. Install the Package

After publishing the package, users can install it in their React app:

npm install google-map-directions

2. Set Up the React Component

Create a React component that utilizes the package to display the map with directions.

Example MapComponent.tsx:

import React, { useEffect } from 'react';
import { loadGoogleMap } from 'google-map-directions';

// Ensure the TypeScript knows about the google.maps object
/// <reference types="google.maps" />

const App: React.FC = () => {
  const apiKey = 'YOUR_GOOGLE_MAPS_API_KEY';
  const pointA: google.maps.LatLngLiteral = { lat: 37.7749, lng: -122.4194 }; // Example: San Francisco
  const pointB: google.maps.LatLngLiteral = { lat: 34.0522, lng: -118.2437 }; // Example: Los Angeles

  useEffect(() => {
    // Load the map and directions after the component has mounted
    if (typeof window !== 'undefined' && window.google) {
      loadGoogleMap(apiKey, 'mapContainer', pointA, pointB);
    }
  }, [apiKey, pointA, pointB]);

  return (
    // Container for the Google Map
    <div id="mapContainer" style={{ width: '100%', height: '500px' }}>
      Loading map...
    </div>
  );
};

export default App;

5. Run the Application

Once everything is set up, users can run their React app, and the map with directions between the specified points will be displayed.

npm start

6. Result

The map should render with a route drawn between pointA and pointB on the specified container. The user will be able to view and interact with the map directly within their React app.