How to Integrate Google Map in React Js App

React js google map with multiple markers example. In this tutorial, i will provide you detail guide on how to add google map in React JS. And as well as how to show multiple markers on google map in react js app.

Google Maps is a free online map from Google. It’s accessible through your web browser or as an app for mobile devices. You can use Google Maps to get step-by-step directions, find information about local businesses, and a whole lot more!. A marker identifies a location on a map. By default, a marker uses a standard image. Markers can display custom images, in which case they are usually referred to as “icons.” Markers and icons are objects of type Marker . You can set a custom icon within the marker’s constructor, or by calling setIcon() on the marker.

Now in this tutorial, you will learn how to adding or implementing Google maps and display multiple markers in react application using the third-party google-maps-react plugin.

React Google Map Integration with Multiple Markers Example

• 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 – Import Google Map Component in App.js

Step 1 – Create React App

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

Execute the following commands to install boostrap 4 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

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

Note that, add the google map api token in above code.

Step 5 – Import Google Map Component in App.js

Import 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

React js add google map example. In this tutorial, you have learned how to add google map and show multiple markers on it in React JS.

Recommended React Posts