Google Maps using React

 

Google maps in React

=========================================================================

npm i react-google-maps

=========================================================================

Index.html file

===============

inside body => div root below

    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAhwfpftes5xsWJZZ1Rm8X0lUgR4anZ-2Q"></script>

App.js

=========================

import React, { useRef } from "react";

import { withGoogleMap, GoogleMap } from 'react-google-maps';

export default function App() {

  const GoogleMapExample = withGoogleMap(props => (

    <GoogleMap

      defaultCenter = { { lat: 40.756795, lng: -73.954298 } }

      defaultZoom = { 13 }

    >

    </GoogleMap>

 ));

  return (

    <div>

    <GoogleMapExample

      containerElement={ <div style={{ height: `500px`, width: '500px' }} /> }

      mapElement={ <div style={{ height: `100%` }} /> }

    />

  </div>

  );

}