Google Maps React Wrapper

By Justin Poehnelt, Senior Developer Relations Engineer at Google · 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.

Opinions expressed are my own and do not necessarily represent those of Google.