Google Maps in React

Login into Google Cloud Platform.

Create a new project. In the API & Services enable API as well as Maps JavaScript API (you can search for it). Go into credentials of API to obtain your API keys.

In your app in the terminal run:

npm install google-maps-react

In the component import:

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

Return:

<Map google={this.props.google} >

Finally:

export default GoogleApiWrapper

This is what your component will look like:

import React, { Component } from 'react';

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

class MapContainer extends Component {

render() {

return (

<Map google={this.props.google} ></Map>
);

}

}

export default GoogleApiWrapper({

apiKey: ("YourApiKey")

})(MapContainer);

Another option is to run:

npm i -S @react-google-maps/api

import { GoogleMap, LoadScript, Marker, InfoWindow } from '@react-google-maps/api';

You can set your location with latitude and longitude by right clicking on the address in Google Maps.

const locations = [

{

name: "Name of Your Location",

location: {

lat: 12.345678901234567,

lng: -12.34567890123456

},

address: "Address of Your Location"

}

]

Set the Load Script to your googleMapsApiKey.

Please refer to https://www.npmjs.com/package/google-maps-react and https://www.npmjs.com/package/@react-google-maps/api for more information.

Great feature to implement in your application.

Happy Coding!