Google Maps Location Saver

An interactive map application built with React and Google Maps API that allows users to save, manage, and export locations with dark/light theme support.

Live Demo

View Live Demo

Features

Map Interaction

• Interactive Google Map with click-to-add location
• Location search with Google Places Autocomplete
• Pan to saved locations
• Custom markers for saved locations

Location Management

• Save locations by clicking on map
• View saved locations in a table
• Delete saved locations
• Show location on map from the list
• Export saved locations to document file

UI/UX

• Dark/Light theme toggle
• Responsive sidebar design
• Material UI components
• Smooth map interactions

Tech Stack

• React 18 - UI Library
• Redux - State management
• @react-google-maps/api - Google Maps React wrapper
• Material UI (MUI) - Component library
• Google Maps API - Maps and Places services

Getting Started

Prerequisites

• Node.js (v14 or higher)
• npm or yarn
• Google Maps API Key

Installation

# Clone the repository
git clone https://github.com/NeeteshNG/Google_Maps.git

# Navigate to project directory
cd Google_Maps

# Install dependencies
npm install

# Add your Google Maps API key in src/config.js
# export default 'YOUR_API_KEY'

# Start development server
npm start

The app will open at http://localhost:3000

Configuration

Create a src/config.js file with your Google Maps API key:

const googleApiKey = 'YOUR_GOOGLE_MAPS_API_KEY';
export default googleApiKey;

Project Structure

src/
├── App.js              # Main application with map and sidebar
├── store.js            # Redux store configuration
├── config.js           # Google Maps API key
├── darkModeStyle.js    # Dark theme map styles
└── index.js            # Entry point

Features in Detail

Location Saving

Click anywhere on the map to mark a location. Click "Add this Location" to save it to your list.

Search

Use the search bar with Google Places Autocomplete to find any location worldwide.

Export

Download all saved locations as a document file containing latitude and longitude coordinates.

Theme Toggle

Switch between light and dark map themes using the toggle button in the sidebar.

Available Scripts

Command	Description
npm start	Run development server
npm test	Run test suite
npm run build	Create production build
npm run deploy	Deploy to GitHub Pages

API Usage

This project uses the following Google Maps APIs:

• Maps JavaScript API
• Places API (for Autocomplete)

Make sure to enable these APIs in your Google Cloud Console.

Author

Neetesh Gupta

• GitHub: @NeeteshNG
• LinkedIn: neetesh-gupta

License

This project is open source and available under the MIT License.