Implement Google Maps in React using Google Maps React

React Google Maps tutorial; Have you ever wondered if Google maps don’t exist, then what would happen to us. If you were a nomad, it would have been pretty difficult for you to search for a new place; However, thanks to Google for developing maps and making our life exorbitantly easy.

In this tutorial, we will talk to you about every aspect essential for adding or implementing Google maps in react application. Also, we will show you how to add and draw red location markers on Google Maps using the third-party google-maps-react plugin.

As we have said, the Google Map React component tutorial is incomplete without the google-maps-react package; this package is quite popular and helps you create reusable google map components in react.

In order to use this package profoundly, you need to pass the google API key; after that, it lets you customize React google maps, you can draw markers and circle on the map component.

How to Integrate and Draw Google Map in React

  • Step 1: Download React Project
  • Step 2: Add google-maps-react in React
  • Step 3: Create & Register New Component
  • Step 4: Implement Google Map with Marker
  • Step 5: Start Application

Download React Project

You have to use the provided command to download the react application.

If you are not new to react and already understood this process, then you can ignore this step.

npx create-react-app react-demo

Add google-maps-react in React

Next, step into the project folder, thereafter execute the recommended command to install the google-map-react package.

npm install google-maps-react

Create & Register New Component

Further, create the new components folder within the src folder.

Right after that create google_map.component.js file within. Then update the given code in components/google_map.component.js file.

import React, { Component } from "react";

export default class GoogleMapComponent extends Component {
    render() {
        return (
            <div>
                {/* ... */}
            </div>
        );
    }
}

Next, register the GoogleMapComponent in src/App.js file, react will load this template when the application starts.


import React from 'react';
import './App.css';

import GoogleMapComponent from '../src/components/google_map.component';


function App() {
  return (
    <div className="App">
      <GoogleMapComponent />
    </div>
  );
}

export default App;

Implement Google Map with Marker

We would like to describe what we are going to do to create and draw the Google map in react:

First, update src/components/google_map.component.js file.

import React, { Component } from 'react';

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

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

export class GoogleMapComponent extends 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);

import a couple of essential packages to integrate Google maps in react, such as Map, Marker, and GoogleApiWrapper from the ‘google-maps-react’ package.

We have to set the initial state of the Google maps; in the state, we define coordinates latitude and longitude, these locations will appear on the map.

The drawMaker() function helps draw markers for multiple locations; invoke this method through the Map directive. You can also use the map properties to customize the google map in react.

Lastly, you have to pass the Google map API key using the GoogleApiWrapper() module.

Start Application

The tutorial is almost done, just start the app using the suggested command, after the app is started, make sure to use the appeared url on the terminal to test the app.

npm start
http://localhost:3000

Conclusion

Google maps are awesome, they help you hit the road without even thinking you might get lost. In this small guide we described how to create React Google Maps component, how to implement Google Maps in React to display location using the latitude and longitude. On top of that, we explained how to draw location markers using the react google maps package.