Integrating Google Maps with React

We may take it without any consideration, however Google Maps is a contemporary miracle in lots of respects. The probabilities it lets in for are unending and may give actual worth to your corporation and customers. From appearing your place of work location to appearing a path a equipment supply will take, Google Maps is versatile and robust sufficient to deal with all kinds of use circumstances.

The usage of Google Maps in React

Certainly, there are a variety of explanation why it’s possible you’ll select to combine Google Maps into your React app, and we’ll be having a look at some of the in style ones: exhibiting your corporation cope with. You’ll be able to then use this as a base for different, extra complicated circumstances should you need.

On account of how extremely robust and sophisticated Google Maps is, we’ll want the aptly named google-map-react equipment to assist us combine it into our React app. This equipment is an element written over a small set of the Google Maps API, and it lets you render any React part at the Google Map. It’s actively maintained and easy sufficient to make use of that it’s my default go-to for integrating Google Maps in a React undertaking.

Sooner than we begin construction, on the other hand, listed below are some explanation why it’s possible you’ll need to put Google Maps for your site (or internet app):

• To offer instructions to your corporation cope with
• To turn a path to an match (i.e., a live performance or convention)
• To offer reside updates on a shipped merchandise’s location
• Show off fascinating puts around the globe

That is only a small listing of options made imaginable through the Google Maps API, and you will have different trade necessities. For this information, we’ll construct a touch web page that comprises a map exhibiting the cope with of the trade, as that is the commonest use case I’ve encountered. The google-map-react group has supplied a listing of examples you’ll undergo should you require one thing slightly extra complicated.

Necessities so as to add Google Maps for your React app

If you need to code at the side of me, you’ll want the next:

1. A React utility arrange
2. A Google Maps API key (it’s loose)
3. Ten mins of your time

I’ve arrange a pattern repository that you’ll clone to observe alongside. Run the next command to clone the repo for your native device:

git clone https://github.com/ovieokeh/contact-page-with-google-maps.git

After cloning, run npm set up to put in all of the undertaking dependencies, then run npm run get started to open the undertaking in a brand new tab. You will have to see a pattern touch web page with out Google Maps built-in. For the remainder of the educational, we’ll create a React part to carry the Google Map and embed it into the touch web page.

As for the Google Maps API key, you’ll get one free of charge through following the directions at the Google Maps documentation. Observe that you are going to want to arrange a billing account to eliminate the restrictions and watermark that incorporates it.

After getting these types of in a position, we will be able to get started construction. The overall model of what we’ll be construction looks as if this:

Integrating Google Maps into React

To reiterate, I can now not undergo all of the code for the touch web page, as this newsletter is concentrated principally on integrating Google Map right into a React undertaking. Listed below are the stairs we’re going to observe:

1. Create a React part to carry the map (Map.jsx)
2. Create some other React part to mark the cope with at the map (LocationPin.jsx)
3. Embed the map part into the touch web page

Map.jsx

mkdir src/elements/map && contact src/elements/Map.jsx

Run the command above to create a brand new document within the /elements folder. Within this document, we’ll write the code for the map part and the cope with pin. Sooner than we begin writing any code, despite the fact that, we need to set up the google-map-react equipment through operating the next command:

yarn upload google-map-react

After putting in the equipment, we’ll additionally want one thing else: the coordinates of our trade cope with. This implies a snappy Google seek for the longitude and latitude values of your corporation cope with. I’m the use of Google’s Amphitheatre cope with, so I did a snappy seek and were given the next values:

const location = {
  cope with: '1600 Amphitheatre Limited-access highway, Mountain View, california.',
  lat: 37.42216,
  lng: -122.08427,
}

The values will likely be other on your cope with, in fact. Retailer the values within the object as proven above, and we move those values to the Map part so we will be able to render a pin at the map. So, to recap, you’ll want the next knowledge:

1. Google Map API Key
2. google-map-react put in
3. Longitude and latitude values for your corporation cope with

As a result of we’ve got all this information, we will be able to get started construction out the Map part. If you wish to see the general code, you’ll take a look at the add-map department at the repo you cloned previous, another way, proceed with the educational to learn to construct it your self.

Nonetheless inside of src/elements/map/Map.jsx, import React, the google-map-package, and the corresponding CSS, like so:

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

You’ll be able to get the contents of map.css from the repo right here.

Create a brand new Map part that takes in two props:

const Map = ({ location, zoomLevel }) => (
  <div className="map">
    <h2 className="map-h2">Come Discuss with Us At Our Campus</h2>

    <div className="google-map">
      <GoogleMapReact
        bootstrapURLKeys={{ key: '' }}
        defaultCenter={location}
        defaultZoom={zoomLevel}
      >
        <LocationPin
          lat={location.lat}
          lng={location.lng}
          textual content={location.cope with}
        />
      </GoogleMapReact>
    </div>
  </div>
)

Are you able to wager what the location prop is? It’s the article we created previous that holds the cope with, latitude, and longitude values of the site. zoomLevel is an integer from 0–20 that determines the size of the map when rendered at the display screen.

You’ll realize that the GoogleMapReact part takes in a kid, LocationPin, however do observe that it could possibly absorb any selection of kids. LocationPin will render the textual content prop on most sensible of the map on the location we specify with the lat and lng props. We’ll create this part within the subsequent part.

Now let’s read about the props being handed to the GoogleMapReact part to grasp what each and every one does:

1. bootstrapURLKeys is an object that holds the API key you copied out of your Google Console. Now you’ll hardcode the important thing right here, however that’s not advisable for code that will get dedicated to GitHub or is another way publicly available. You’ll be able to take a look at this dialogue on how you can safe your API keys at the consumer
2. defaultCenter is just the middle of the map when it a lot for the primary time
3. defaultZoom defines the preliminary scale of the map

This on my own is sufficient to render a bare-bones map at the display screen, however we want to do one thing else sooner than we will be able to render this part. We want to write the code for LocationPin.

We wish a solution to name customers’ consideration to a particular location at the map. Since google-map-react lets in us to render any React part at the map, we will be able to create a easy part that presentations a pin icon and textual content.

For the icon, I’ll be the use of the Iconify library, which is a number of loose SVG icons. Nonetheless inside of the similar document we’ve been running in, import the next programs like so:

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

Then pass forward and outline the LocationPin part like so:

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

I’m certain this part is beautiful self-explanatory. Observe that the styling for LocationPin is already integrated in map.css, however you’ll taste it on the other hand you favor.

We’re in reality carried out with this instructional. All we want to do now could be export the Map part and come with it at the touch web page. On the backside of the document, export the Map part:

export default Map

The usage of the Map part

Since the Map part is only a React part, we will be able to pass forward and use it any place we love. Open src/App.jsx, import the Map part, and come with it between ContactSection and DisclaimerSection, like so:

import React from 'react'

import IntroSection from './elements/intro/Intro'
import ContactSection from './elements/contact-section/ContactSection'
import MapSection from './elements/map/Map' // import the map right here
import DisclaimerSection from './elements/disclaimer/Disclaimer'
import FooterSection from './elements/footer/Footer'

import './app.css'

const location = {
  cope with: '1600 Amphitheatre Limited-access highway, Mountain View, california.',
  lat: 37.42216,
  lng: -122.08427,
} // our location object from previous

const App = () => (
  <div className="App">
    <IntroSection />
    <ContactSection />
    <MapSection location={location} zoomLevel={17} /> {/* come with it right here */}
    <DisclaimerSection />
    <FooterSection />
  </div>
)

export default App

Now get started the undertaking through operating yarn get started to your terminal and navigate to localhost:3000. You will have to see your touch web page with a nice-looking map that pinpoints your corporation cope with. Lovely nifty, proper?

Conclusion

If you want to develop your next React-based project for your business then hire the best React js app development company like  The React Company who is ready to help you!

With fewer than 100 strains of code, we’ve been in a position to combine Google Maps to show our place of work location at the side of a visible marker to pinpoint the cope with. This can be a elementary instance of what you’ll accomplish with google-map-react.

There are extra examples on their documentation to be used circumstances which might be slightly extra complicated than this slightly easy one. I’m hoping this instructional was once useful to you, and glad coding ❤.