google-maps-api-react-map package

Library google-maps-api-react-map allows you to render a Google Map in your application.

google-maps-api-react-map provides very simple bindings to the google maps api and lets you use it in your app as React components.

[!IMPORTANT] This library requires React v16.8 or later.

Installation

npm install --save google-maps-api-react-map 

or

yarn add google-maps-api-react-map

General Usage

importing the MapsApiProvider component from the library

import { MapsApiProvider } from "google-maps-api-react-map";

and now we can wrap our components from the ecosystem google-maps-api-react

 return (
    <div className="App">
      <MapsApiProvider apiKey="your google maps api key">
        <MapComponent center={center} />
      </MapsApiProvider>
    </div>
  );

MapComponent might look something like this

const MapComponent = (props: MapComponentProps) => {
  const { center } = props;
  return (
    <div className="map-container">
      <Map center={center}></Map>
    </div>
  );
};

prop center mandatory and must look like this

const center = { lat: 39.705958, lng: -75.538 };

minimal styles map.css

.map-container {
  width: 600px;
  height: 600px;
}

The Map component will occupy the entire container area.

Props

|

Events

|

Next.js

[!IMPORTANT] To use the library in a Next.js project, you need to make the component client-side.