Google map ref

Question

We are using the https://www.npmjs.com/package/@react-google-maps/api package and I want to get a refence to the google map that was created. The closes I found online was https://stackoverflow.com/questions/45427635/how-to-create-polyline-using-react-google-maps-library but it didn't work as it was returning the map ref as null. Any ideas?

Comments

Can you describe what you are trying to achieve by extracting the ref for your google map component?

---

I have child component that would use the reference to the map in order to access the click on the map to close a information box.

Answer 1

Which components is this in?

Answer 2

I'd say you should try using the onClick callback on the maps component. Are you using Redux for your application? If you do, you can try something like this:

// in the maps component
const onMapClick = (e) => {
  if (sufficient) {
    dispatch(updateSomething());
  }
};

return (
    <GoogleMap
      ...otherProps
      onClick={onMapClick}
    >
);

Then you can use redux to control the state of your information box.

You'll need to dig a bit deeper into this because I'm not sure what the event object contains, but I think this implementation should work well for your use case.

Comments

This would work but I need a map ref in general to do other things not just the closing of the boxes.

---

I can see that all objects within this react-google-map package have an onClick callback (Marker, Circle, Polygon,...), so you can probably pass custom callbacks in to make the map do what you want when the user interact with those objects. Does this suffice your use case?