Google Maps Measurement Tool

An interactive web application that allows users to measure areas and radii directly on a map using the Google Maps API. Built with React and TypeScript, this tool offers a user-friendly interface for quick and accurate geographic measurements.

🌐 Access the Application

You can access the production application at the following link: Google Maps Measurement Tool

📸 Screenshots

Here are some screenshots showcasing the application:

Home Page

Main interface for selecting measurement modes and interacting with the map.

Area Measurement

Drawing polygons to calculate the area within.

Radius Measurement

Creating circles to measure radii.

🛠️ Built With

• React: Library for building user interfaces.
• TypeScript: Static typing for reliable code.
• Vite: Fast and modern build tool.
• Google Maps API: Map rendering and geographic computations.
• TailwindCSS: Utility-first CSS framework for styling the UI.

Features

1. Area Measurement:

   • Draw polygons directly on the map.
   • Calculate the area inside the polygons in square meters or kilometers.

2. Radius Measurement:

   • Place circles on the map.
   • Measure radii and total coverage.

3. Interactive User Interface:

   • Toggle between measurement modes.
   • Responsive design for desktop and mobile.

4. Custom Styling and Integration:

   • Predefined styles for better visualization.
   • Leveraging @react-google-maps/api for seamless integration with Google Maps.

🚀 Installation

Follow these steps to set up the project locally:

1. Clone the repository:

   git clone https://github.com/Jonlle/google-maps-measure-tools.git
   cd google-maps-measure-tools

2. Install the dependencies:

   npm install

3. Obtain a Google Maps API key:

   • Visit the Google Cloud Console and create a new project.
   • Enable the "Maps JavaScript API."
   • Generate an API key and add it to a .env file in the root directory:

     VITE_GOOGLE_MAPS_API_KEY=your_api_key_here
     

4. Start the development server:

   npm run dev

5. Open http://localhost:3000 to view the application.

Contribution

Contributions are welcome! If you'd like to improve this project, please follow these steps:

1. Fork the repository.
2. Create a new branch:

   git checkout -b feature/new-feature

3. Make your changes and commit them:

   git commit -m 'Add new feature'

4. Push to your fork:

   git push origin feature/new-feature

5. Submit a Pull Request.

😊