▲Next.js

Integrating with Google Maps

Updated 2026-04-20

3 min read

Integrating with Google Maps

Introduction

Google Maps is a powerful tool for adding interactive maps and location-based features to your web applications. In this tutorial, we'll walk you through the process of integrating Google Maps into a Next.js application. We'll cover everything from setting up your environment to implementing basic map functionalities.

Prerequisites

Before we begin, ensure that you have the following prerequisites:

Basic knowledge of JavaScript and React.
A working Next.js project set up on your local machine.
A Google Cloud Platform account with access to the Google Maps API.

Step 1: Set Up Your Google Maps API Key

Create a Google Cloud Project:
- Go to the Google Cloud Console.
- Click on "Select a project" and then click on "New Project".
- Fill in the required details and create your project.
Enable the Maps JavaScript API:
- In the Google Cloud Console, navigate to "APIs & Services" > "Library".
- Search for "Maps JavaScript API" and enable it.
Create an API Key:
- Go to "Credentials" under "APIs & Services".
- Click on "Create Credentials" and select "API key".
- Restrict your API key by adding HTTP referrers (optional but recommended).

Step 2: Install Required Packages

Next, we need to install the necessary packages for integrating Google Maps into our Next.js application.

npm install @react-google-maps/api

This package provides a set of React components that wrap around the Google Maps JavaScript API.

Step 3: Create a Map Component

Now, let's create a new component that will render the map. We'll call it MapComponent.

Create the Map Component:
- Inside your Next.js project, create a new file named MapComponent.jsx in the components directory.

// components/MapComponent.jsx

import { GoogleMap, LoadScript } from '@react-google-maps/api';

const containerStyle = {
  width: '400px',
  height: '400px'
};

const center = {
  lat: -3.745,
  lng: -38.523
};

function MapComponent() {
  return (
    <LoadScript googleMapsApiKey="YOUR_API_KEY">
      <GoogleMap
        mapContainerStyle={containerStyle}
        center={center}
        zoom={10}
      >
        {/* Child components, like markers, info windows, etc. */}
      </GoogleMap>
    </LoadScript>
  );
}

export default MapComponent;

Replace YOUR_API_KEY:
- Replace "YOUR_API_KEY" with the API key you generated in Step 1.

Step 4: Use the Map Component

Now that we have our map component, let's use it in one of our pages.

Import and Use the Map Component:
- Open your pages/index.js file (or any other page where you want to display the map).
- Import and use the MapComponent.

// pages/index.js

import Head from 'next/head';
import styles from '../styles/Home.module.css';
import MapComponent from '../components/MapComponent';

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Google Maps Integration</title>
        <meta name="description" content="Integrating Google Maps in Next.js" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1>Welcome to Your Map Page</h1>
        <MapComponent />
      </main>

      <footer className={styles.footer}>
        <a
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by{' '}
          <span className={styles.logo}>
            <img src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
          </span>
        </a>
      </footer>
    </div>
  );
}

Step 5: Customize the Map

You can customize the map by adding markers, info windows, and other features. Let's add a marker to our map.

Add a Marker:
- Modify the MapComponent.jsx file to include a marker.

// components/MapComponent.jsx

import { GoogleMap, LoadScript, Marker } from '@react-google-maps/api';

const containerStyle = {
  width: '400px',
  height: '400px'
};

const center = {
  lat: -3.745,
  lng: -38.523
};

function MapComponent() {
  return (
    <LoadScript googleMapsApiKey="YOUR_API_KEY">
      <GoogleMap
        mapContainerStyle={containerStyle}
        center={center}
        zoom={10}
      >
        <Marker position={center} />
      </GoogleMap>
    </LoadScript>
  );
}

export default MapComponent;

Step 6: Handle User Interactions

You can handle user interactions like clicking on the map or markers. Let's add an event handler for a marker click.

Add Marker Click Event:
- Modify the MapComponent.jsx file to include an event handler.

// components/MapComponent.jsx

import { GoogleMap, LoadScript, Marker } from '@react-google-maps/api';
import { useState } from 'react';

const containerStyle = {
  width: '400px',
  height: '400px'
};

const center = {
  lat: -3.745,
  lng: -38.523
};

function MapComponent() {
  const [markerPosition, setMarkerPosition] = useState(center);

  const handleMarkerClick = () => {
    alert(`You clicked the marker at ${markerPosition.lat}, ${markerPosition.lng}`);
  };

  return (
    <LoadScript googleMapsApiKey="YOUR_API_KEY">
      <GoogleMap
        mapContainerStyle={containerStyle}
        center={center}
        zoom={10}
      >
        <Marker position={markerPosition} onClick={handleMarkerClick} />
      </GoogleMap>
    </LoadScript>
  );
}

export default MapComponent;

Best Practices

Environment Variables: Store your API keys in environment variables to keep them secure. Use .env.local file for local development and .env.production for production.

# .env.local
NEXT_PUBLIC_GOOGLE_MAPS_API_KEY=YOUR_API_KEY

Error Handling: Always handle errors when loading the Google Maps script or interacting with the map.
Performance Optimization: Use lazy loading techniques to load the Google Maps script only when needed. This can improve the performance of your application.

Conclusion

In this tutorial, we've covered how to integrate Google Maps into a Next.js application. We've set up our environment, created a map component, customized it with markers, and handled user interactions. By following these steps, you should be able to add interactive maps to your Next.js projects effectively.

Feel free to explore more advanced features of the @react-google-maps/api package, such as overlays, polylines, polygons, and more, to enhance your map functionalities further.

▲Next.js

Integrating with Google Maps

Updated 2026-04-20

3 min read

Integrating with Google Maps

Introduction

Prerequisites

Before we begin, ensure that you have the following prerequisites:

Basic knowledge of JavaScript and React.
A working Next.js project set up on your local machine.
A Google Cloud Platform account with access to the Google Maps API.

Step 1: Set Up Your Google Maps API Key

Create a Google Cloud Project:
- Go to the Google Cloud Console.
- Click on "Select a project" and then click on "New Project".
- Fill in the required details and create your project.
Enable the Maps JavaScript API:
- In the Google Cloud Console, navigate to "APIs & Services" > "Library".
- Search for "Maps JavaScript API" and enable it.
Create an API Key:
- Go to "Credentials" under "APIs & Services".
- Click on "Create Credentials" and select "API key".
- Restrict your API key by adding HTTP referrers (optional but recommended).

Step 2: Install Required Packages

Next, we need to install the necessary packages for integrating Google Maps into our Next.js application.

npm install @react-google-maps/api

This package provides a set of React components that wrap around the Google Maps JavaScript API.

Step 3: Create a Map Component

Now, let's create a new component that will render the map. We'll call it MapComponent.

Create the Map Component:
- Inside your Next.js project, create a new file named MapComponent.jsx in the components directory.

// components/MapComponent.jsx

import { GoogleMap, LoadScript } from '@react-google-maps/api';

const containerStyle = {
  width: '400px',
  height: '400px'
};

const center = {
  lat: -3.745,
  lng: -38.523
};

function MapComponent() {
  return (
    <LoadScript googleMapsApiKey="YOUR_API_KEY">
      <GoogleMap
        mapContainerStyle={containerStyle}
        center={center}
        zoom={10}
      >
        {/* Child components, like markers, info windows, etc. */}
      </GoogleMap>
    </LoadScript>
  );
}

export default MapComponent;

Replace YOUR_API_KEY:
- Replace "YOUR_API_KEY" with the API key you generated in Step 1.

Step 4: Use the Map Component

Now that we have our map component, let's use it in one of our pages.

Import and Use the Map Component:
- Open your pages/index.js file (or any other page where you want to display the map).
- Import and use the MapComponent.

// pages/index.js

import Head from 'next/head';
import styles from '../styles/Home.module.css';
import MapComponent from '../components/MapComponent';

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Google Maps Integration</title>
        <meta name="description" content="Integrating Google Maps in Next.js" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1>Welcome to Your Map Page</h1>
        <MapComponent />
      </main>

      <footer className={styles.footer}>
        <a
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by{' '}
          <span className={styles.logo}>
            <img src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
          </span>
        </a>
      </footer>
    </div>
  );
}

Step 5: Customize the Map

You can customize the map by adding markers, info windows, and other features. Let's add a marker to our map.

Add a Marker:
- Modify the MapComponent.jsx file to include a marker.

// components/MapComponent.jsx

import { GoogleMap, LoadScript, Marker } from '@react-google-maps/api';

const containerStyle = {
  width: '400px',
  height: '400px'
};

const center = {
  lat: -3.745,
  lng: -38.523
};

function MapComponent() {
  return (
    <LoadScript googleMapsApiKey="YOUR_API_KEY">
      <GoogleMap
        mapContainerStyle={containerStyle}
        center={center}
        zoom={10}
      >
        <Marker position={center} />
      </GoogleMap>
    </LoadScript>
  );
}

export default MapComponent;

Step 6: Handle User Interactions

You can handle user interactions like clicking on the map or markers. Let's add an event handler for a marker click.

Add Marker Click Event:
- Modify the MapComponent.jsx file to include an event handler.

// components/MapComponent.jsx

import { GoogleMap, LoadScript, Marker } from '@react-google-maps/api';
import { useState } from 'react';

const containerStyle = {
  width: '400px',
  height: '400px'
};

const center = {
  lat: -3.745,
  lng: -38.523
};

function MapComponent() {
  const [markerPosition, setMarkerPosition] = useState(center);

  const handleMarkerClick = () => {
    alert(`You clicked the marker at ${markerPosition.lat}, ${markerPosition.lng}`);
  };

  return (
    <LoadScript googleMapsApiKey="YOUR_API_KEY">
      <GoogleMap
        mapContainerStyle={containerStyle}
        center={center}
        zoom={10}
      >
        <Marker position={markerPosition} onClick={handleMarkerClick} />
      </GoogleMap>
    </LoadScript>
  );
}

export default MapComponent;

Best Practices

Environment Variables: Store your API keys in environment variables to keep them secure. Use .env.local file for local development and .env.production for production.

# .env.local
NEXT_PUBLIC_GOOGLE_MAPS_API_KEY=YOUR_API_KEY

Error Handling: Always handle errors when loading the Google Maps script or interacting with the map.
Performance Optimization: Use lazy loading techniques to load the Google Maps script only when needed. This can improve the performance of your application.

Conclusion

Feel free to explore more advanced features of the @react-google-maps/api package, such as overlays, polylines, polygons, and more, to enhance your map functionalities further.