DEV Community

Justin Poehnelt for Google Maps Platform

Posted on • Originally published at justin.poehnelt.com on

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>
);
Enter fullscreen mode Exit fullscreen mode

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.

Reinvent your career. Join DEV.

It takes one minute and is worth it for your career.

Get started

Top comments (1)

Collapse
 
gnutyud profile image
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

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay