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.