How to Add Google Maps to Your Web App Using React
Tags: react, webdev, beginners, javascript
Published: 2024-04-16 12:24:58

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](https://react.dev/learn/installation).

Secondly, decide which framework/library you want to use for Google Maps. I choose [@vis.gl/react-google-maps](https://visgl.github.io/react-google-maps/docs/get-started). 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:
```javascript
npm install @vis.gl/react-google-maps
```
or
```javascript
yarn add @vis.gl/react-google-maps
```

----------------------

## Create Google Maps API Key
1. Go to [Google Developer Console](https://console.cloud.google.com/welcome), 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:
```javascript
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:
```javascript
.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.
```javascript
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.

![google map](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tl9tl8djs1gji0vvvkf8.png)

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](https://www.linkedin.com/in/aneeqa-khan-990459135/) or [GitHub](https://github.com/AneeqaKhan).