How to integrate Google Maps in React using google-map-react

Home » How to integrate Google Maps in React using google-map-react

How to integrate Google Maps in React using google-map-react; In this tutorial, we will learn how to integrate Google Maps into the react application, Google maps is a map service provided by google to view maps on your website.

google-map-react is a component written in Reactjs using the google map API, it allows you to render a map on your website, and it allows customization in google maps like adding markers, zooming out, zooming in, info window, etc…

You can download the working example of a line chart using Recharts in ReactJS Tutorial https://github.com/technostuf/react-google-maps-example

Create a React application
Install google-map-react library
Add code to the file
Run a React application

Create a React application

Create a React app using the below command

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

After running the above command system will create a new folder “react-google-maps-example” so you need to move into that folder, use the below command to change the directory

 cd react-google-maps-example

Install google-map-react library

 npm install --save google-map-react
 
 OR using yarm

 yarn add google-map-react

Add code to the file

Create a component file to hold google map code separate from another component and put the below code into that file

import React, { useState } from "react";
import { Map, GoogleApiWrapper, InfoWindow, Marker } from 'google-maps-react';
const GoogleMapComponent = (props) => {
    let markersList = [
        { lat: 23.024000, lng: 72.580276 },
        { lat: 23.0063, lng: 72.6026 }
    ]
    let [markers] = useState(markersList);
    const mapStyles = {
        width: '100%',
        height: '100%'
    };

    let myMarkers = Object.entries(markers).map(([key, val]) => (
        <Marker key={key} id={key} position={{
            lat: val.lat,
            lng: val.lng
        }}
            onClick={() => console.log("Clicked")} />
    ))

    return (
        <>
            <Map
                google={props.google}
                zoom={14}
                style={mapStyles}
                initialCenter={
                    {
                        lat: 23.033863,
                        lng: 72.585022
                    }
                }
            >
                {myMarkers}
            </Map>
        </>
    );
}

export default GoogleApiWrapper({
    apiKey: 'AIzaSyC5il79cJqCx4MxErV04F6y'
})(GoogleMapComponent);

After adding a code, you have called this component file into your code, in my case I am adding it to App.js

Make sure you have to change the API key to your Google Map API key, please follow the article to get Google Map API Key https://developers.google.com/maps/documentation/javascript/get-api-key

import './App.css';
import GoogleMapComponent from './GoogleMapComponent';

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

export default App;

Run a React application

Run the React application using the following command

 npm start

After compilation, the program opens your browser and runs http://localhost:3000/

You can download the working example of a Google Maps in React using google-map-react Tutorial

https://github.com/technostuf/react-google-maps-example