Google Maps Replica Created with React.js

Google Maps Clone (Gatere Maps)

This project is a clone of Google Maps, the popular web mapping service that offers satellite imagery, street maps, 360° panoramic views of streets, real-time traffic conditions, and route planning.

GatereMapsMenu



Technologies Used

  • ReactJS : A JavaScript library for building user interfaces.
  • Tailwind CSS : A utility-first CSS framework for rapidly designing responsive web pages.
  • Maps API: Used for rendering the interactive maps.
  • GeoCoding API: Integrated for location search functionality.
  • Vite : A fast and efficient build tool for modern web development.
  • Vercel : A cloud platform for static site deployment.

Features

  • Interactive map interface similar to Google Maps.
  • Search for locations using the integrated GeoCoding API.
  • Search for a location using coordinates.
  • Street view: You can explore the streets of any location in the world.
  • Utilizes React Icons for consistent and attractive UI elements.

Getting Started

To get started with Gatere Maps locally, follow these steps:

  1. Clone the repository:
https://github.com/gateremark/g_maps_clone.git
  1. Install the dependencies:
cd g_maps_clone
pnpm install
  1. Register for a Maps API via Google Cloud
  • Create a .env.local / .env file in the root directory of the project.
  • Register for a Maps JavaScript API key via the Google Cloud platform and enable the GeoCoding API. You can follow the official documentation to obtain the API key.
  • Open the .env.local file and add the following line:
VITE_REACT_APP_API_KEY=YOUR_API_KEY
  • Replace YOUR_API_KEY with the actual API key you obtained from Google Cloud. By setting up the .env.local file with the appropriate API key, the application will be able to access the geocoding API and provide accurate property locations.
  1. Start the development server:
pnpm run dev
  1. Open your browser and visit specified local host port to view the app eg. http://localhost:5173

Deployment

Gatere Maps is deployed using Vercel. Any changes pushed to the main branch will trigger an automatic deployment. You can visit the live version of HomeTopia at https://g-maps-clone.vercel.app/.

Contributing

Contributions are welcome! If you encounter any issues or have suggestions for improvement, please open an issue or submit a pull request.

  1. Fork the repository.
  2. Create a new branch.
  3. Make your changes and commit them.
  4. Push to the branch.
  5. Submit a pull request.

GitHub

View Github

Related Posts

Recent Posts

ഇടുക്കിയിലെ മലയോര മേഖലകളിൽ രാത്രിയാത്ര നിരോധിച്ചു. രാത്രി ഏഴു മുതൽ രാവിലെ ആറു വരെയാണ് നിരോധനം

ഏന്തയാർ ഈസ്റ്റിൽ പ്രളയത്തിൽ തകർന്ന പാലത്തിന് പകരം പുതിയ പാലം നിർമ്മിക്കുവാൻ താത്ക്കാലിക പാലം പൊളിച്ച് നീക്കി

Explore the Investment Opportunities: A Comprehensive Guide to Different Types of Mutual Funds

Title: Understanding Mutual Funds: A Beginner's Guide to Investing

തീവ്രമഴ മുന്നറിയിപ്പിന്റെ പശ്ചാതലത്തിൽ സംസ്ഥാനം ജാഗ്രതയിൽ

250,000 അപേക്ഷകൾ വർദ്ധിച്ചതിനാൽ ട്രാൻസ്‌പോർട്ട് കമ്മീഷണർ പരിശോധന പുനരാരംഭിക്കും

ഏലക്കയിൽ കീടനാശിനി സാന്നിധ്യം; ആറര ലക്ഷത്തിലധികം ടിൻ അരവണ നശിപ്പിക്കാൻ ടെൻഡർ ക്ഷണിച്ച് ദേവസ്വം ബോർഡ്‌

ഭീമൻ പാറക്കഷണങ്ങൾ അടർന്ന് ദേശീയ പാതയിലേക്ക് വീഴുന്നത് പതിവാകുന്നു. കുട്ടിക്കാനത്തിനും മുണ്ടക്കയത്തിനുമിടയിൽ നിലനിൽക്കുന്നത് വൻ അപകട ഭീഷണി

ചക്രവാതച്ചുഴി:അതിശക്തമായ മഴ വരുന്നു

പ്ലസ് വൺ പ്രവേശനം. അക്ഷയയിൽ തിക്കി തിരക്കേണ്ട, നെറ്റിവിറ്റി/ജാതി തെളിയിക്കാൻ പത്താംതരം സർട്ടിഫിക്കറ്റ് മതി