Google Maps React Wrapper

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

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.

Comments

[Alex Shev]

Keeping the wrapper render function limited to loading and failure states makes the map component easier to test in isolation. For production use, I would also surface a retry path for transient script-load failures instead of leaving the failure state as a terminal blank component.

[Tung Nguyen Duy]

Hi Justin Poehnelt, I was find the way to contact with you then I found your personal website and go here.
I was following this repo to implement google map ODRD (on demand rides and deliveries) in my React app. But I got an issue that I've created a question here. I do not know how to stop the api call to feetengine to get trip info when component unmount. Hope you can help me out. Thanks