Google Maps React Wrapper

Published on Sep 17, 2021

Update: This library has been archived. We recommend all users to switch to the new @vis.gl/react-google-maps, which provides a collection of components and hooks and can be configured to be fully compatible with this package.

The package @googlemaps/react-wrapper is a wrapper component that helps load the Google Maps JavaScript API. Below is a short snippet demonstrating usage.

render.tsx

import { Wrapper, Status } from "@googlemaps/react-wrapper";

const render = (status: Status): ReactElement => {
  if (status === Status.LOADING) return <Spinner />;
  if (status === Status.FAILURE) return <ErrorComponent />;
  return null;
};

const MyApp = () => (
  <Wrapper apiKey={"YOUR_API_KEY"} render={render}>
    <MyMapComponent />
  </Wrapper>
);

Recently I livecoded its usage and created google.maps.Map and google.maps.Marker components.

If you have any questions about its usage, please feel free to open an issue on GitHub.

Disclaimer: I am a member of the Google Workspace Developer Relations team. The opinions expressed here are my own and do not necessarily represent those of Google.