React JS Google Map Example Tutorial

Google Maps is one of the most popular mapping tools, and integrating it into a React application can provide an enhanced user experience. In this article, you will learn step by step how to integrate the Google Maps API into a React application.

You must have noticed that many apps have a google map with multiple markers. So that you can click it. And find address easily.

Before integrating the Google Maps API into a React application, you need to get an API key. 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

Using the following steps, you can start integrating Google Maps into your React application.

• Step 1 – Create React App
• Step 2 – Install Bootstrap 4 Package
• Step 3 – Install google-maps-react in React
• Step 4 – Create Google Map Component
• Step 5 – Add Google Map Component in App.js

Step 1 – Create React App

In this step, open your terminal and execute the following command on your terminal to create a new react app:

npx create-react-app my-react-app

Note that, if you are not new to react and already understood this process, then you can ignore above step no 1.

To run the React app, execute the following command on your terminal:

npm start

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

Step 2 – Install Bootstrap 4 Package

In this step, execute the following commands to install boostrap 4 library into your react app:

npm install bootstrap --save

Then, Add react router and 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

In this step, execute the following command to install the google-map-react package:

npm install google-maps-react

Step 4 – Create Google Map Component

In this step, visit the src directory of your react js app and create a google map component named GoogleMapComponent.js. And add the following code into it:

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);

Here is a breakdown of above given code:

This code is an example of how to integrate the Google Maps API into a React application using the google-maps-react library. It defines a GoogleMapComponent class that extends the React.Component class and contains a constructor and a render method. The GoogleApiWrapper function is also used to provide the necessary Google Maps API token for the application to access the Google Maps API.

In the constructor, an array of objects representing the coordinates of various locations is defined and stored in the state property of the class. These coordinates will be used to place markers on the map.

The drawMarker method is defined to create a Marker component for each set of coordinates in the cords array stored in the state property. Each Marker component has a unique key and a position property that specifies the latitude and longitude of the location to be marked. An onClick handler is also defined for each Marker component that logs a message to the console when clicked.

In the render method, a Map component is defined with a google property that specifies the Google Maps API, a style property that specifies the dimensions of the map, a zoom property that specifies the initial zoom level of the map, and an initialCenter property that specifies the initial center of the map. The drawMarker method is called within the Map component to render the markers on the map.

Finally, the GoogleApiWrapper function is used to wrap the GoogleMapComponent class and provide the necessary Google Maps API token. The wrapped class is then exported as the default export of the module.

Overall, this code demonstrates how to use the google-maps-react library to integrate the Google Maps API into a React application and render markers on the map at specific coordinates.

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. You can further customize your map by adding additional features, such as search and directions.

Recommended React Posts