google-map-directions
v1.0.1
Published
NPM package for Google Map directions that allows users to specify two points, draw lines between them, and display the map
Downloads
8
Maintainers
Keywords
Readme
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.