How to Embed Google Maps on your Next.js App in 3 Steps

embed map on oddcircles.com

So you are developing a nextjs app and you need google maps. But you want a quick guide to help you understand how you can embed google maps into your app.

Well, you are at right place.

First things first, let’s make sure we have everything we need to get started. You’ll need to have a Google Maps API key to use the @googlemaps/js-api-loader package. If you don’t have one yet, don’t worry! It’s easy to get one. Just follow these steps:

1. Go to the Google Cloud Console.
2. If you don’t already have a project, create one by clicking the “Select a project” dropdown in the top navigation bar and clicking the “New Project” button.
3. Once you have a project selected, go to the “APIs & Services” section and click the “Dashboard” link.
4. Click the “+ ENABLE APIS AND SERVICES” button at the top of the page.
5. Search for “Maps JavaScript API” and click on it.
6. Click the “Enable” button.
7. Next, click the “Create Credentials” button.
8. Choose “API key” as the credential type.
9. You may be prompted to set up an API key restriction. If you want to restrict the key to certain URLs, you can do that now. Otherwise, just leave it unrestricted and click the “Create” button.
10. You’ll now see your API key. Copy it and save it somewhere safe.

Now that you have your API key, let’s get started with embedding Google Maps on your Next.js website.

Step 1: Create a new Next.js app

First, create a new Next.js app using the following command:

npx create-next-app my-app

This will create a new Next.js app in a directory named my-app. Change into the new directory using cd my-app.

Step 2: Install the @googlemaps/js-api-loader package

Next, install the @googlemaps/js-api-loader package using the following command:

npm install @googlemaps/js-api-loader

This package allows you to asynchronously load the Google Maps JavaScript API and use it in your Next.js app.

Step 3: Create a map component

Create a new file in the components directory called Map.js. In this file, add the following code:

import { useEffect, useRef, useMemo } from "react";
import { Loader } from "@googlemaps/js-api-loader";
function Map({ address }) {
  const mapRef = useRef(null);
const geocoder = useMemo(() => new google.maps.Geocoder(), []);
useEffect(() => {
    const loader = new Loader({
      apiKey: process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY,
      version: "weekly",
    });
loader.load().then(() => {
      geocoder.geocode({ address: address }, (results, status) => {
        if (status === "OK") {
          const map = new google.maps.Map(mapRef.current, {
            center: results[0].geometry.location,
            zoom: 8,
          });
const marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location,
          });
        } else {
          console.error(`Geocode was not successful for the following reason: ${status}`);
        }
      });
    });
  }, [address, geocoder]);
return <div style={{ height: "400px" }} ref={mapRef} />;
}
export default Map;

You must be wondering why we are using useMemo here?

Well, imagine that you have a toy box with lots of different toys in it. Every time you want to play with a toy, you have to reach into the box and find the one you want. This can take a long time if the toy you want is buried deep in the box.

Now imagine that you have a special helper who can hand you the toy you want as soon as you ask for it. This helper knows where every toy is in the box and can grab it for you right away. This makes it much faster and easier to play with your toys!

In programming, we sometimes have a similar problem. We might have a piece of code that creates a new object every time it runs. This can take a lot of time and use up a lot of memory, especially if the object is complex.

But what if we could create the object once and then reuse it every time we need it? That’s where useMemo comes in! useMemo is like your special toy helper. It allows us to create an object once and then reuse it every time we require it, instead of creating a new object every time. This can make our code run faster and use less memory, just like having a special helper to hand us our toys!

So in our Map component, we use useMemo to create the geocoder object once and then reuse it every time the component re-renders. This saves us time and memory, and makes our code run faster and more efficiently.

This component uses the @googlemaps/js-api-loader package to asynchronously load the Google Maps JavaScript API and then create a map centred on the given address.

Now that you have your map component, you can use it in your Next.js page. Here’s an example of how you might use it:

import Map from "../components/Map";

function MyPage() {
  return (
    <div>
      <h1>My Page</h1>
      <Map address="1600 Amphitheatre Parkway, Mountain View, CA" />
    </div>
  );
}
export default MyPage;

This will render a map centred on the address “1600 Amphitheatre Parkway, Mountain View, CA”.

And that’s it! You now know how to embed Google Maps on your Next.js website using the @googlemaps/js-api-loader package.

If you have any questions, let me know in the comments.