Seamlessly Integrating Google Maps into Your React App

Learn how to integrate Google Maps into your React application with ease. This guide covers setup, adding features like drag-and-drop markers, location search, reverse Geocoding and displaying user addresses. Simplify location-based functionality in your app today! 🌍️🌟

How I Navigated the Map Integration Maze (and You Can Too)

Integrating Google Maps into a React application feels like solving a puzzle with pieces scattered across documentation and tutorials. When I was working on **OnFit, an AI-integrated healthcare platform, we partnered with [Orange Health Diagnostic Lab](https://www.orangehealth.in/)** to offer at-home diagnostic services. This required us to implement Google Maps for features like checking serviceability of user locations, tracking real-time locations, saving addresses, searching locations, and the pièce de résistance: selecting locations on a draggable map with a custom marker. 🗺️✨

The learning curve was steep. From setting up APIs to resolving errors, I faced every roadblock imaginable. But through trial and error, I pieced together a workflow that works. So, here’s a blog to save you from the same headaches — a complete guide to integrating Google Maps into your React app, with all the essential features. 🚀

Tools of the Trade

To bring Google Maps into your React application, you’ll need a few things:

1. A React Application Setup

Get started by creating a React app:

npx create-react-app project-name

2. Enable Google APIs and Services

• Log in to your **Google Developer Console**.
• Create and select a new project.
• Navigate to APIs & Services > Enable APIs & Services.
• Search for and enable the following:
• Maps JavaScript API (mandatory).
• Optional APIs for added features:
• Geocoding API (convert coordinates to addresses and vice versa).
• Places API (for search functionality).
• Maps SDK for Android (if building native apps).

API services for maps

3. Get Your API Key

• Go to APIs & Services > Credentials.
• Click Create Credentials > API Key.

Note: While Google Maps JavaScript API has a free tier, you’ll need to set up a billing account to remove limitations and watermarks. 💳

Get API key here after apis enabled

4. Install the react-google-maps/api Library

This library simplifies using Google Maps JavaScript API features within React:

npm i @react-google-maps/api

The Roadmap to Integration

Step 1: Set Up the MapProvider

The MapProvider component will load the Google Maps JavaScript API asynchronously. Import necessary modules and define the libraries you’ll use:

[embed]

Step 2: Create a GoogleMap Component

[embed]

Step 3: Create the Map Container

[embed]

Enhancing the Map with Key Features

1. Get User’s Current Location

Use the browser’s Geolocation API to retrieve and set the user’s current location:

const handleClick = () => {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
      (position) => {
        const { latitude, longitude } = position.coords;
        console.log({ latitude, longitude });
      },
      (error) => console.error("Geolocation Error:", error)
    );
  } else {
    console.error("Geolocation not supported.");
  }
};

2. Location Search with the Places API

You can fetch location data based on user queries using the Places API:

export async function addressSearch(query) {
  const url = `https://maps.googleapis.com/maps/api/place/textsearch/json?query=${query}&key=${process.env.REACT_APP_GOOGLE_MAPS_API_KEY}`;

  try {
    const response = await fetch(url);
    if (!response.ok) throw new Error(response.statusText);
    return await response.json();
  } catch (error) {
    console.error("Address search failed:", error);
  }
}

3. Reverse Geocoding

Convert coordinates to a human-readable address using the Geocoding API:

export async function reverseGeocoding(lat, lng) {
  const url = `https://maps.googleapis.com/maps/api/geocode/json?latlng=${lat},${lng}&key=${process.env.REACT_APP_GOOGLE_MAPS_API_KEY}`;

  try {
    const response = await fetch(url);
    if (!response.ok) throw new Error(response.statusText);
    return await response.json();
  } catch (error) {
    console.error("Reverse Geocoding failed:", error);
  }
}

Map layout

Search funtionility

Wrapping Up

By following these steps, you can integrate Google Maps into your React app and unlock powerful location-based functionalities. From draggable markers to location searches and user-friendly features like address display, you’ll transform your app into a navigation powerhouse. Whether you’re working on a healthcare app like **OnFit** or any other project, maps add that essential layer of interactivity and usability. 🌟📍

So, what’s stopping you? Get started today and let your users explore the world — one map at a time! 🌐