How to Integrate Google Maps With React JS

Introduction

There are a variety of reasons why you would want to use Google Maps in your React app, and we’ll look at one of the most common ones: showing your company address. If you like, you may use this as a starting point for more complicated scenarios.

We’ll need the google-map-react package to assist us to incorporate Google Maps into our React project because it’s tremendously strong and sophisticated. This package contains a component that renders any React component on a Google Map using a tiny set of the Google Maps API. I use it first whenever I want to make a React app that uses Google Maps. It is well-maintained and easy to use.

In any case, here are a few reasons why you might consider using Google Maps on your website:

Offer directions to your company’s location
To depict a path to an event (i.e., a concert or conference)
To offer real-time updates on the whereabouts of a mailed item
Showcase fascinating locations from across the world.

This is only a sample of what the Google Maps API can do, and you may have additional business requirements. Because this is the most typical use case I’ve found, we’ll develop a contact page with a map indicating the business’s address for this guide. If you need something a little more complicated, the google-map-react team has offered a set of samples you may go over.

Requirements for integrating Google Maps into your React application

Setup of a React application
A Google Maps API key (which is completely free)

You may obtain a free Google Maps API key by following the procedures in the Google Maps documentation. To get rid of the limits and watermarks that come with it, you’ll need to create a billing account.

Google Maps integration in React

To be clear, I will not go into all of the contact page code because this blog focuses on integrating Google Maps into a React project. The stages we’ll take are as follows:

1. To hold the map, create a React component (Map.jsx)
2. To mark the address on the map, create a new React component (LocationPin.jsx)

Map.jsx

mkdir src/components/map && touch src/components/Map.jsx

To create a new file in the /components folder, use the command above. We’ll write the code for the map component and the address pin in this file. However, before we begin writing code, we must first install the google-map-react package with the command:

yarn add google-map-react

We’ll also need something else when we’ve installed the package: the coordinates of our company address. This entails a fast Google search for your company’s longitude and latitude information. I’m using Google’s Amphitheater address, so I did a quick search and got the following values:

const location = {
		address: '1600 Amphitheatre Parkway, Mountain View, california.',
		lat: 37.42216,
		lng: -122.08427,
		}

Of course, the figures for your address will be different. As demonstrated above, we save the data in the object and provide them to the Map component so that we can draw a pin on the map. To summarise, you’ll require the following information:

API Key for Google Maps
Installed google-map-react
Values for longitude and latitude for your company address

We can begin putting up the Map component now that we have all this information. If you want to view the completed code, go to the add-map branch of the repo you cloned earlier, but if you want to learn how to construct it yourself, stick with the tutorial.

Import React, the google-map-package, and the related CSS into src/components/map/Map.jsx as follows:

import React from 'react'
		import GoogleMapReact from 'google-map-react'
		import './map.css'

Create a new Map component that takes in two props:

const Map = ({ location, zoomLevel }) => (
		<div className="map">
		<h2 className="map-h2">Come Visit Us At Our Campus</h2>
		
		<div className="google-map">
		<GoogleMapReact
		bootstrapURLKeys={{ key: '' }}
		defaultCenter={location}
		defaultZoom={zoomLevel}
		>
		<LocationPin
		lat={location.lat}
		lng={location.lng}
		text={location.address}
		/>
		</GoogleMapReact>
		</div>
		</div>
		)

Are you able to figure out what the location prop is? It’s the object we made before that stores the location’s address, latitude, and longitude information. The scale of the map when presented on the screen is determined by zoom level, which is an integer ranging from 0 to 20.

You’ll see that the GoogleMapReact component has a child called LocationPin, but it may have many children. The text prop will be rendered on top of the map at the place specified by the lat and long values. In the next step, we’ll make this component.

Check out what GoogleMapReact does with the props it receives:

bootstrapURLKeys is a container for the API key you copied from the Google Console. You can now hardcode the key in this location, but this is not advised for code that will be submitted to GitHub or otherwise made public.
When the map loads for the first time,defaultCenter is merely the middle of the map.
Default zoom determines the map’s initial scale.

This is enough to display a basic map on the screen, but we need to do something extra before we can display this component. The code for LocationPin must be written.

LocationPin

We’d like to be able to draw users’ attention to a certain spot on the map. We can develop a basic component that shows a pin icon and text using google-map-react, which allows us to render any React component on the map.

I’ll be utilizing the Iconify library, which is a collection of free SVG icons, for the icon. Continue working in the same file and import the following packages as follows:

import { Icon } from '@iconify/react'
		import locationIcon from '@iconify/icons-mdi/map-marker'

Then, as follows, define the LocationPin component:

const LocationPin = ({ text }) => (
		<div className="pin">
		<Icon icon={locationIcon} className="pin-icon" />
		<p className="pin-text">{text}</p>
		</div>
		)
		export default Map

This component, I’m sure, is self-explanatory. LocationPin’s styling is already included in map.css, but you may style it as you like.
All that’s left is to export the Map component and add it to the contact page. Export the Map component at the bottom of the file:

Using the Map component

We may use the Map component wherever we want because it is just a React component. Import the Map component into src/App.jsx and place it between ContactSection and DisclaimerSection, as follows:

import React from 'react'
		
		import IntroSection from './components/intro/Intro'
		import ContactSection from './components/contact-section/ContactSection'
		import MapSection from './components/map/Map' // import the map here
		import DisclaimerSection from './components/disclaimer/Disclaimer'
		import FooterSection from './components/footer/Footer'
		
		import './app.css'
		
		const location = {
		address: '1600 Amphitheatre Parkway, Mountain View, california.',
		lat: 37.42216,
		lng: -122.08427,
		} // our location object from earlier
		
		const App = () => (
		<div className="App">
		<IntroSection />
		<ContactSection />
		<MapSection location={location} zoomLevel={17} /> {/* include it here */}
		<DisclaimerSection />
		<FooterSection />
		</div>
		)
		export default App

Now run yarn start in your terminal and browse to localhost:3000 to begin the project. You should see a nice-looking map on your contact page that pinpoints your business address. Isn’t that clever?

Conclusion

We were able to combine Google Maps with our office location and a visual marker to locate the place with fewer than 100 lines of code. This is a simple example of what google-map-react can help you with.

The documentation contains more examples of more complex use cases. I hope you found this lesson useful, and best of luck with your programming.

Reference Link: https://developers.google.com/maps/documentation/urls/get-started