React Tutorial- How To Create And Draw Google Maps In React With Google Maps API

Throughout this guide, we will learn to integrate Google Maps in React 16+ application using Google Maps API and google-maps-react package.

We are all grateful to Google Maps since it has made everyone’s life quite easy to a great extent. It is almost impossible to imagine our journey to a new place without the help of Google Maps. It is a top-notch map service offered by Google. It also comes with other configuration features as well.

It gives the user a great advantage by providing contextual information to find coordinates as well as a street address.

Hence, we will see in this tutorial how simple it is to add and implement the Google Maps API in the react project. It will be done to show maps in the react apps.

 

Create And Draw Google Maps In React With Google Maps API Tutorial

Let’s learn the below-given steps in order to implement the maps

Step 1- Create React Application

The very first step is just to create the react application. For this, we use create-react-app and execute the following command through the terminal window.

npx create-react-app react-google-maps-tutorial

Then, we get into the project root.

cd react-google-maps-tutorial

Next is required to start the application.

npm start

 

Step 2- Install Google Map React Component Package

Afterward, we install google-maps-react in react application by using the following command. It helps in creating a Google Maps component in react application without much effort.

npm i google-maps-react

 

Step 3- Integrate Simple Google Map In React

Now, we add the below code in App.js file to create a simple Map in React Js.

import React, { Component } from 'react';
import { Map, GoogleApiWrapper } from 'google-maps-react';

const mapStyles = {
  width: '100%',
  height: '100%'
};

export class MapContainer extends Component {
  render() {
    return (
      <Map
        google={this.props.google}
        zoom={14}
        style={mapStyles}
        initialCenter={
          {
            lat: 37.090240,
            lng: -95.712891
          }
        }
      />
    );
  }
}

export default GoogleApiWrapper({
  apiKey: 'YOUR GOOGLE MAPS API KEY'
})(MapContainer);

 

FOr running Google Maps smoothly, we need to have Google Maps API.

After we get the Google Maps API, then we define the API key and inject it into the GoogleApiWrapper method.

Further is imported the Map and GoogleApiWrapper Services from google-maps-react, then is defined the custom styling with CSS and wrapped in mapStyles object and bound to the Map directive.

For displaying Google Maps in React, define the Map directive with various propr to configure a map.

 

Step 4- Adding Marker Google Map In React

Afterward, we place the following code in our react template.

import React, { Component } from 'react';
import { Map, GoogleApiWrapper, Marker } from 'google-maps-react';

const mapStyles = {
  width: '100%',
  height: '100%',
};

export class MapContainer extends Component {
  
  constructor(props) {
    super(props);
    
    this.state = {
      cords: [
        {lat: 9.96233, lng: 49.80404},
        {lat: 6.11499, lng: 50.76891},
        {lat: 6.80592, lng: 51.53548},
        {lat: 9.50523, lng: 51.31991},
        {lat: 9.66089, lng: 48.70158}
      ]
    }
  }

  showMarkers = () => {
    return this.state.cords.map((store, index) => {
      return <Marker key={index} id={index} position={{
       lat: store.lat,
       lng: store.lng
     }}
     onClick={() => console.log("Clicked")} />
    })
  }

  render() {
    return (
        <Map
          google={this.props.google}
          zoom={8}
          style={mapStyles}
          initialCenter={{ 
            lat: 9.96233, 
            lng: 49.80404
        }}>
          {this.showMarkers()}
        </Map>
    );
  }
}

export default GoogleApiWrapper({
  apiKey: 'Your Google Maps API token'
})(MapContainer);

 

Now, we import Marker API from google-maps-react package.

Then, we have to define the coordinates of various places in the state object.

After this, we create showMarkers method() and draw marker using Marker directive with latitude and longitude props.

Lastly, we call the showMarkers() function within the Map directive. With this, appear the red markers on the Google Map in the React Application.

 

Summary

So finally, we reach the end of this tutorial in which we have learned to integrate Google Maps in React. In addition, we saw how to draw marker in Google Maps using google-maps-react plugin.

Hope you have easily learned all the steps of this guide.

 

Thanks