DEV Community

Cover image for How to Add Google Maps to Your Web App Using React
Aneeqa Khan
Aneeqa Khan

Posted on • Originally published at aneeqa-k25.Medium

How to Add Google Maps to Your Web App Using React

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


Enter fullscreen mode Exit fullscreen mode

or



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


Enter fullscreen mode Exit fullscreen mode

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;


Enter fullscreen mode Exit fullscreen mode

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;
}


Enter fullscreen mode Exit fullscreen mode

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;


Enter fullscreen mode Exit fullscreen mode

This setup will render the map on your web app.

google map

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.

Top comments (9)

Collapse
 
michaeltharrington profile image
Michael Tharrington • Edited

Nice one, Aneeqa! Super quick, straightforward, and helpful.

Also, lovin' that cover image!

Collapse
 
aneeqakhan profile image
Aneeqa Khan

Thank you, Michael!

Collapse
 
harry_wood profile image
Harry Wood

For those who want to escape the bland advertising platform of google maps, there are open alternatives. Open source javascript map display libraries include LeafletJS and MapLibre GL JS, these typically then let you work with open licensed map data from OpenStreetMap with a lot of flexibility.
Looks like the equivalent react tutorials for these things would be: react-leaflet.js.org/ and docs.maptiler.com/react/maplibre-g...

Collapse
 
dvalin99 profile image
Domenico Tenace

Clean and simple, thanks for sharing!

Collapse
 
dumebii profile image
Dumebi Okolo

Awesome!

Collapse
 
aneeqakhan profile image
Aneeqa Khan

Thanks!

Collapse
 
hyesbarret43 profile image
hyesbarret

To integrate Google Maps into your web app built with React, you can utilize the "react-google-maps" library, which simplifies the process. First, install the library using npm or yarn. Then, obtain a Google Maps API key from the Google Cloud Console. Next, import the necessary components from the library, including GoogleMap, Marker, etc. Use these components within your React components, passing the API key and any required props. Finally, customize and style the map as needed using CSS. Be sure to handle any error cases and follow Google's usage policies.
Regard,
alphaag.ru/

Collapse
 
gorhovakimyan200121 profile image
gorhovakimyan200121

You need to obtain an API key from the Google Cloud Platform Console. Once you have your API key, install the @react-google-maps/api package, which provides a React-friendly wrapper for the Google Maps JavaScript API.In your React component, import the necessary modules from @react-google-maps/api and create a basic Google Map

Collapse
 
rehan_tufail profile image
Rehan Tufail

Thankyou so much it was really helpful