Add or Embed a Google Map Location on a React App

When building a business or portfolio website, we are sometimes required to show the location of the business in a Google map. Then it is easier for the customers to spot the location. Here we will discuss the steps to add or embed the Google Map location on a React app.

Prerequisites

The reader should be aware of the following technologies:-

What we will learn

After completing this article, we will learn to create a new React application using the create-react-app tool and we will add or embed the Google Map in it.

The steps are explained below:-

  • Create a new React app
  • Search for the term “Apple headquarters” in Google map.
  • Click on the share button, Embed a map button, and copy the iframe section.
  • Convert the style tag to React compatible.
  • Paste the code on App.js on our React app.

The application will look the same as below after coding.

Add Google Map Location on a React App

So let us jump into the topic. We can first create a new React project and then add the Google map in it.

Create a new React project

The first step is setting up a React application on your system. This can be easily done using the NPX tool.

So, install Node.js on your system first and create a react application using NPX. Don’t bother about the term NPX, because it’s a tool coming with NPM(Node Package Manager) 5.2+ onwards which will install on your system with Node.js itself.

If you need further assistance in the installation of React on your system, use the below links.

Install React on WindowsUbuntu, and macOS

npx create-react-app googlemap-react-demo-app

This command will create a react application with the project name googlemap-react-demo-app

Now enter the project directory and start the app.

cd googlemap-react-demo-app
npm start

It will open up the React application we have created in our browser window with the address https://localhost:3000. The port may vary if 3000 is busy.

Now we can use our favorite code editor to edit our project. I personally recommend Visual Studio Code.

Copy the HTML from Google map to embed

Now let us copy the HTML to embed from Google map. This can get in simple steps.

Search for the location on Google map click the Share button

Access the Google map website and search for the location to be embedded on our website. If we are building a business website, we need to search for the business location.

So click on the Google map URL below and search for your business location.

https://maps.google.com/

Here we are searching for the term “apple headquarters”. This will give the map of the app Apple Park in Cupertino. We can also adjust the zoom from here.

Now click on the share button.

Click on Embed a map tab and copy the HTML

We will get the Share modal and click on the Embed a map tab from the top and the Copy HTML button.

Add the copied HTML in our React app

This will copy the iframe HTML to the clipboard. Now paste it on the App.js file in our React app.

<iframe
  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3172.3325395304414!2d-122.01116148467422!3d37.33463524513264!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808fb59127ce078f%3A0x18e1c3ce7becf1b!2sApple%20Park!5e0!3m2!1sen!2sin!4v1637309850935!5m2!1sen!2sin"
  width="600"
  height="450"
  style="border:0;"
  allowfullscreen=""
  loading="lazy"
></iframe>

We need to change the style property like below. Because in React, it is the structure.

style={{ border: "0" }}

So that the code will be like below.

import "./App.css";

function App() {
  return (
    <div className="App">
      <iframe
        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3172.3325395304414!2d-122.01116148467422!3d37.33463524513264!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808fb59127ce078f%3A0x18e1c3ce7becf1b!2sApple%20Park!5e0!3m2!1sen!2sin!4v1637309850935!5m2!1sen!2sin"
        width="600"
        height="450"
        style={{ border: "0" }}
        allowfullscreen=""
        loading="lazy"
      ></iframe>
    </div>
  );
}

export default App;

The file structure and code will look as below.

In the browser, we can see that a map is rendered on our app with the location we have chosen before.

Codesandbox

Refer to the CodeSandbox link to view the live app. You can clone this project to your CodeSandbox account and edit the code also.

https://codesandbox.io/s/trusting-sinoussi-yh3z3

GitHub

You can always refer to the GitHub repository to clone this project, refer to the code and work on top of it.

https://github.com/techomoro/googlemap-react-demo-app

Summary

So in this article, we discussed the steps to add or embed Google map location on a React app.

One thought on “Add or Embed a Google Map Location on a React App

  1. Hi Syamlal!
    Thank you so much for composing this article. It was just the right solution I needed. Keep up the good work!

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.