Create & Draw Google Maps in React 18 with Google Maps API

Last Updated on by in React JS

In this article, we will talk about how to integrate Google Maps in React 16+ application using Google Maps API and google-maps-react package.

All hail to Google Maps, It has made everybody’s life simpler. We can’t imagine our life without Google Maps. It is a top-notch map service offered by Google, which comes along with tons of configuration features.

Google Maps give a particular kind of tranquillity to the users in contextual information to find coordinates and street address.

This tutorial walks you through how to quickly implement Google Maps API in the React project to show maps on your react application.

Create React Application

Theoretically, we use create-react-app for creating a brand new React application.

Let’s begin the first step by executing the following command through your terminal window:

npx create-react-app react-google-maps-example

Get into the project root:

cd react-google-maps-example

Start the application:

npm start

Install Google Map React Component Package

Install google-maps-react in react application using below command, it helps us to create a Google Maps component in react application effortlessly.

npm i google-maps-react --legacy-peer-deps

This plugin is going to help us to create the Google maps component in React.

Integrate Simple Google Map in React

Add the given 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);

In order to run the Google Maps smoothly, you need to have Google Maps API that you can get it from here.

Once you got the Maps API, then define your API Key and inject it in the GoogleApiWrapper method.

Next, we Imported the Map and GoogleApiWrapper services from ‘google-maps-react’; Defined the custom styling with CSS and wrapped in mapStyles object and bound to the Map directive.

To display Google Maps in React, define the Map directive with various props to configure a map.

Adding Marker Google Map in React

Place the following code in your 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);

Import Marker API from ‘google-maps-react’ package;

Define the coordinates of various places in the state object.

Create showMarkers() method and draw marker using Marker directive with latitude and longitude props.

Finally, call the showMakers() function within the Map directive. It will manifest the red markers on the Google Map in the React application.

Conclusion

So this was it, eventually we have completed the React Google Maps tutorial. In this tutorial we learned how to integrate Google Maps in React and how to draw marker in Google Maps using google-maps-react plugin.

I hope you will like this tutorial, please do share it with others.