React JS Google Map Integration Example Tutorial

Google-map-react allows users to render Google Maps in react js application component. In this article, you will learn step by step how to integrate the Maps using Google GEO APIs into a React application.

It would help if you got an API key before integrating the Google Maps API into a React application. To get an API key, follow these steps:

1. Go to the Google Cloud Console.
2. If you do not have a project, create one.
3. Once you have a project, go to the APIs & Services Dashboard.
4. Click on the “+ ENABLE APIS AND SERVICES” button and search for “Google Maps JavaScript API”.
5. Click on the “ENABLE” button.
6. Go to the Credentials page.
7. Click on the “+ CREATE CREDENTIALS” button and select “API key”.
8. Copy the API key generated.

How to Integrate Google Maps with React

Here are the steps to allow developers to easily integrate Google Maps into their React applications.

Step 1 – Create React App

Run the following command on your cmd to create a new react app:

npx create-react-app my-react-app

To run the React app:

npm start

Check out your React app on this URL: localhost:3000

Step 2 – Install and Set Up Bootstrap

Run the following commands to install bootstrap library into your react app:

npm install bootstrap --save

Import bootstrap.min.css file in src/App.js file:

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
function App() {
  return (
    <div>
      <h2>How to Add Google Map in React Js App</h2>
    </div>
  );
}
export default App;

Step 3 – Install google-maps-react in React

Run the following command to install the google-map-react package:

npm install google-maps-react

Step 4 – Create Google Map Component

Go to the src directory of your react js app, and create a google map component named GoogleMapComponent.js:

import React, { Component } from 'react';
import { Map, Marker, GoogleApiWrapper } from 'google-maps-react';
const customizeMap = {
  width: '100%',
  height: '100%'
};
class GoogleMapComponent extends React.Component {
  
  constructor(props) {
    super(props);
    this.state = {
      cords: [
        {latitude: 51.507351, longitude: -0.127758},
        {latitude: 31.046051, longitude: 34.851612},
        {latitude: 51.165691, longitude: 10.451526},
        {latitude: 52.215933, longitude: 19.134422},
        {latitude: 50.0874654, longitude: 14.4212535},
        {latitude: 7.5554942, longitude: 80.7137847},
      ]
    }
  }
  drawMarker = () => {
    return this.state.cords.map((store, i) => {
      return <Marker key={i} id={i} position={{
       lat: store.latitude,
       lng: store.longitude
     }}
     onClick={() => console.log("Event Hanlder Called")} />
    })
  }
  render() {
    return (
        <Map
          google={this.props.google}
          style={customizeMap}
          zoom={6}
          initialCenter={{ 
            lat: 9.96233, 
            lng: 49.80404
        }}>
          {this.drawMarker()}
        </Map>
    );
  }
}
export default GoogleApiWrapper({
  apiKey: 'Google Maps API Token'
})(GoogleMapComponent);

Step 5 – Add Google Map Component in App.js

In this step, you need to add GoogleMapComponent.js file in src/App.js file:

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import GoogleMapComponent from './GoogleMapComponent';
function App() {
  return (
    <div className="App">
      <GoogleMapComponent />
    </div>
  );
}
export default App;

Conclusion

With these basic steps, you have successfully integrated Google Maps API into your React application.

Recommended React Posts