Project Overview: This project integrates Google Maps API into a React application to display a map and calculate the distance and duration between two locations.

Key Features:

Map Display: Shows a Google Map with markers for the origin and destination locations. Autocomplete: Provides suggestions as users type in the origin and destination input fields. Geolocation: Allows users to use their current location as the origin. Travel Mode Selection: Allows users to choose between driving, walking, bicycling, or transit modes for distance calculation. Distance and Duration: Displays the calculated distance and duration for the selected route. Error Handling: Displays an error message if there's an issue with geolocation or calculating directions. Technologies Used:

React: Used for building the frontend components and managing state. @react-google-maps/api: Library for integrating Google Maps API with React. Chakra UI: Used for styling the UI components. Learning Outcomes:

Integrating Google Maps API with React. Using geolocation to get the user's current location. Calculating distance and duration between two locations. Handling user input and providing autocomplete suggestions. Future Enhancements:

Add more customization options for map markers and styles. Improve error handling and user feedback. Implement more advanced route planning features.