How to Integrate Google Maps With Marker on My React Next.js Website With Address?

Photo by Edgar on Unsplash

Here’s a step-by-step tutorial on how to integrate Google Maps with a marker on your React Next.js website using an address:

Step 1: Create a Google Maps API Key

To use Google Maps in your application, you need to obtain a Google Maps API key. Here’s how to do it:

1. Go to the Google Cloud Console: https://console.cloud.google.com/
2. Create a new project or select an existing project
3. Enable the Google Maps JavaScript API
4. Create a new API key
5. Copy the API key to use later

Step 2: Set up your Next.js project

Assuming you have a Next.js project set up, you need to install the Google Maps JavaScript API package. Here’s how to do it:

1. Open your terminal and navigate to your project directory
2. Run the following command to install the package: npm install @googlemaps/js-api-loader
3. Create a new file called googleMapsLoader.js in your utils directory (or any other directory you prefer)
4. Copy the following code into googleMapsLoader.js:

import { Loader } from '@googlemaps/js-api-loader';

const loader = new Loader({
  apiKey: 'YOUR_API_KEY',
  version: 'weekly',
  libraries: ['places'],
});
export default loader;

Replace YOUR_API_KEY with the API key you obtained in Step 1.

Step 3: Create a new component

Create a new component called Map in your components directory (or any other directory you prefer). Copy the following code into Map.js:

import { useState, useEffect } from 'react';
import loader from '../utils/googleMapsLoader';

const Map = ({ address }) => {
  const [map, setMap] = useState(null);
  useEffect(() => {
    loader.load().then(() => {
      const geocoder = new window.google.maps.Geocoder();
      geocoder.geocode({ address }, (results, status) => {
        if (status === 'OK') {
          const mapOptions = {
            center: results[0].geometry.location,
            zoom: 16,
          };
          const newMap = new window.google.maps.Map(
            document.getElementById('map'),
            mapOptions
          );
          const marker = new window.google.maps.Marker({
            position: results[0].geometry.location,
            map: newMap,
          });
          setMap(newMap);
        }
      });
    });
  }, [address]);
  return <div id="map" style={{ height: '400px' }}></div>;
};
export default Map;

This component receives an address prop, which is the address you want to display on the map. When the component mounts or the address prop changes, it uses the Google Maps API to geocode the address and display a map with a marker at the location.

Step 4: Use the Map component

Now that you’ve created the Map component, you can use it anywhere in your application. Here's an example of how to use it:

import Map from '../components/Map';
const Page = () => {
  const address = '1600 Amphitheatre Parkway, Mountain View, CA';
  return (
    <div>
      <h1>Google Maps Example</h1>
      <Map address={address} />
    </div>
  );
};
export default Page;

Replace address with the address you want to display on the map.

That’s it! You should now have a Google Map with a marker displaying the address you provided.