How to Add Google Maps to Your Web App Using React — Part 1

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.