Creating an Interactive Map with the Google Maps API in Next.js

#webdev #javascript #nextjs #googlecloud

Introduction

In this article, we will learn how to integrate the Google Maps API into a Next.js application. We will cover everything from the initial setup to implementing advanced features such as multiple markers, routes, and calculating distances between locations.

Step 1: Initial Setup of the Next.js Project

First, let's create a new Next.js project. Open your terminal and run the following commands:

npx create-next-app my-google-maps-app
cd my-google-maps-app
npm install --save @react-google-maps/api

Step 2: Obtain the Google Maps API Key

Go to the Google Cloud Console.
Create a new project or select an existing one.
In the navigation menu, go to APIs & Services > Library.
Search for "Maps JavaScript API" and click on it.
Click Enable to activate the API for your project.
Go to APIs & Services > Credentials.
Click Create credentials and select API key.
Copy the generated API key. This is the key you will use in your code.

Step 3: Handling Environment Variables in Next.js

Use environment variables to avoid exposing your API key in the source code. Create a .env.local file in the root of your project and add your API key:

NEXT_PUBLIC_GOOGLE_MAPS_API_KEY=your_api_key_here

Step 4: Create a React Component with a Google Map

Here's an example of how to use the Google Maps API in a React component to display a map with a marker:

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

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

const center = {
  lat: 37.437041393899676,
  lng: -4.191635586788259
};

const GoogleMapComponent = () => {
  return (
    <LoadScript googleMapsApiKey={process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY}>
      <GoogleMap
        mapContainerStyle={containerStyle}
        center={center}
        zoom={10}
      >
        <Marker position={center} />
      </GoogleMap>
    </LoadScript>
  );
};

export default GoogleMapComponent;

Step 5: Add Routes to the Map

To add routes to the map, you must use the DirectionsService and DirectionsRenderer components from the @react-google-maps/api library. Here's an example of how to do this:

'use client'
import React from 'react';
import { GoogleMap, LoadScript, Marker, DirectionsService, DirectionsRenderer } from '@react-google-maps/api';

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

const origin = {
  lat: 37.437041393899676,
  lng: -4.191635586788259
};

const destination = {
  lat: 37.440575591901045,
  lng: -4.231433159434073
};

const GoogleMapRouteComponent = () => {
  const [directions, setDirections] = React.useState(null);
  const [travelTime, setTravelTime] = React.useState(null);

  const directionsCallback = (response) => {
    if (response !== null) {
      if (response.status === 'OK') {
        setDirections(response);
        const route = response.routes[0].legs[0];
        setTravelTime(route.duration.text);
      } else {
        console.error('Directions request failed due to ' + response.status);
      }
    }
  };

  return (
    <LoadScript googleMapsApiKey={process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY}>
      <GoogleMap
        mapContainerStyle={containerStyle}
        center={origin}
        zoom={10}
      >
        <Marker position={origin} />
        <Marker position={destination} />
        <DirectionsService
          options={{
            destination: destination,
            origin: origin,
            travelMode: 'DRIVING'
          }}
          callback={directionsCallback}
        />
        {directions && (
          <DirectionsRenderer
            options={{
              directions: directions
            }}
          />
        )}
      </GoogleMap>
      {travelTime && <p>Estimated travel time: {travelTime}</p>}
    </LoadScript>
  );
};

export default GoogleMapRouteComponent;

Step 6: Explanation of the Directions API

The Google Maps Directions API is a service that calculates directions between locations. It can provide detailed route information, including travel time, distance, and steps for navigating from one place to another. In the above example:

DirectionsService: This component is used to fetch directions from the Google Maps API. It requires options such as the origin, destination, and travel mode (e.g., driving, walking, biking).
DirectionsRenderer: This component takes the directions fetched by the DirectionsService and renders them on the map.
Callback Function: The callback function processes the response from the Directions API. If the response is successful (status === 'OK'), it updates the state with the directions and the travel time.

Step 7: Add a Loader While the Map is Loading

To improve the user experience, you can add a loader while the map is loading:

// components/Loader.js
const Loader = () => (
  <div style={{ display: 'flex', justifyContent: 'centre', alignItems: 'centre', height: '400px' }}>
    <p>Loading...</p>
  </div>
);

export default Loader;

'use client'
import React from 'react';
import { GoogleMap, LoadScript, Marker } from '@react-google-maps/api';
import Loader from '../components/Loader';

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

const centre = {
  lat: 37.437041393899676,
  lng: -4.191635586788259
};

const GoogleMapComponent = () => {
  return (
    <LoadScript googleMapsApiKey={process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY} loadingElement={<Loader />}>
      <GoogleMap
        mapContainerStyle={containerStyle}
        centre={centre}
        zoom={10}
      >
        <Marker position={centre} />
      </GoogleMap>
    </LoadScript>
  );
};

export default GoogleMapComponent;

Step 8: Implementing Multiple Markers

To display multiple locations on the map, you can iterate over an array of locations and create a marker for each one.

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

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

const centre = {
  lat: 37.437041393899676,
  lng: -4.191635586788259
};

const locations = [
  { lat: 37.437041393899676, lng: -4.191635586788259 },
  { lat: 37.440575591901045, lng: -4.231433159434073 },
  // Add more locations here
];

const MultipleMarkersMap = () => {
  return (
    <LoadScript googleMapsApiKey={process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY}>
      <GoogleMap
        mapContainerStyle={containerStyle}
        centre={centre}
        zoom={10}
      >
        {locations.map((location, index) => (
          <Marker key={index} position={location} />
        ))}
      </GoogleMap>
    </LoadScript>
  );
};

export default MultipleMarkersMap;

Conclusion

This article has shown you how to integrate the Google Maps API into a Next.js application, from initial setup to implementing advanced features such as routes, calculating distances, and multiple markers. You can create interactive and customised map applications that enhance the user experience by following these steps.

Top comments (5)

Димитър Петков • Jun 10

there is mistake in last example
not 'centre' , but 'center' should be the name of property

Menai Ala Eddine • Dec 12

Is it safe to expose Google Key?

Currently, you are considering using NEXT_PUBLIC_ for our Google API keys, but I'm concerned about potential security risks. Could you help clarify best practices for handling API keys, particularly whether it should implement server-side API routes or server actions instead of exposing keys client-side, and what security measures we should put in place if we do need to use NEXT_PUBLIC_?"