google-maps-api-react-map

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} className="map"></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;
}

.map {
  width: 100%;
  height: 100%;
}

[!IMPORTANT] The map component needs to be specified in width and height. You can specify as I did, through the container, you can directly transfer styles to the map component. If you do not specify the dimensions, the map will not be drawn, because its dimensions will be equal to 0.

Next.js

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