Hello folks!

If you want to integrate Google Maps into your web application, then this article is for you. I’ll try to explain each step in detail to make it understandable for developers of any age.

Firstly, you need to create a new React application. You can learn more about it here.

Secondly, decide which framework/library you want to use for Google Maps. I choose @vis.gl/react-google-maps. The Google Maps Platform team provided it, so I wanted to use it.

Install react-google-maps

To install this library, you can use these commands:

npm install @vis.gl/react-google-maps

or

yarn add @vis.gl/react-google-maps

Create Google Maps API Key

1. Go to Google Developer Console, create a “New Project” and select a name for your project.
2. From the left-side menu, go to “APIs and Services,” and then select the “Credentials” screen.
3. Click on “Create Credentials” and select to generate the “API Key”.
4. The API key will appear shortly on the screen. Copy it and paste it into your .env file.

Create a Map Component

Now create a new file named CustomMap.js and define the <Map/> component in it like this:

import "./App.css";
import React, { useState } from "react";
import { Map, Marker} from "@vis.gl/react-google-maps";

const CustomMap = () => {
  // shows marker on London by default
  const [markerLocation, setMarkerLocation] = useState({
    lat: 51.509865,
    lng: -0.118092,
  });

  return (
    <div className="map-container">
      <Map
        style={{ borderRadius: "20px" }}
        defaultZoom={13}
        defaultCenter={markerLocation}
        gestureHandling={"greedy"}
        disableDefaultUI
      >
        <Marker position={markerLocation} />
      </Map>
    </div>
  );
}

export default CustomMap;

And give styling to show the map in the centre of the screen:

.app {
  display: flex;
  padding: 5rem;
  justify-content: space-evenly;
  font-family: Verdana, Geneva, Tahoma, sans-serif
}

.map-container {
  height: 500px;
  width: 50%;
  border: 2px solid black;
  border-radius: 20px;
}

Set Context for Google Maps API

At last, set the context for Google Maps API key to provide access to our <CustomMap /> component.

import React from "react";
import CustomMap from "./CustomMap";
import { APIProvider } from "@vis.gl/react-google-maps";
import "./App.css";

const App = () => {
  return (
    <div className="app">
      <APIProvider apiKey={process.env.REACT_APP_GOOGLE_MAPS_API_KEY}>
        <CustomMap />
      </APIProvider>
    </div>
  );
};

export default App;

This setup will render the map on your web app.

In the next article, I’ll share how to add a click function on the map.

Thank you for reading! Feel free to connect with me on LinkedIn or GitHub.