How to Integrate Google Maps With React JS

Introduction

We’ll cover one of the most prevalent reasons you wish to include Google Maps in your React application: indicating the address of your business and showing your company address. If you like, you may use this as a place to start for more complex situations.

We’ll need the Google map-react package to assist us in incorporating 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.

It 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 We’ve found, we’ll develop a contact page with a map indicating the business’s address for this guide. If you need something more complicated, the google-map-React team has offered a set of samples you may go over.

So, read first and decide whether you need professional React.js services.

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.

Requirements for integrating Google Maps into your React application

Setup of a React application

A Google Maps API key (which is entirely free)

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

Google Maps integration in React

To be clear, we 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
Use the command above to create a new file in the /components folder. In the following section, We’ll create the map’s code element and the address pin. However, we must first install the google-map-react package using the command: before we can start writing code.

yarn add google-map-react

After installing the software, we will also want our corporate address coordinates. It entails a fast Google search for your company’s longitude and latitude information. I quickly searched using Google’s Amphitheater address and came up with the following results:

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'

To implement a Map component that accepts two props, follow these steps:

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

LocationPin

We’d like to be able to draw users’ attention to a particular spot on the map. We can develop an essential 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 a free library of SVG icons called Iconify 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 is left is to export the Map component and add it to the contact page. Please ensure that you 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

In conclusion, integrating React JS with Google Maps opens up a world of possibilities for developers to enhance their web applications with powerful location-based functionalities. Following the step-by-step guide, developers can quickly obtain a Google Maps API key, set up a React project, and seamlessly integrate interactive maps into their applications. This integration improves the user experience and allows developers to leverage the full potential of Google Maps services, such as geocoding and distance calculations.

The combination of Google Maps React empowers developers to build dynamic and responsive applications that cater to a wide range of use cases, from simple location displays to complex mapping features. However, it is essential to be mindful of the potential costs associated with using the Google Maps API beyond the free tier, and developers should review the pricing details to ensure it aligns with their project’s needs.

FAQ