Welcome to the CSC Q&A, on our server named in honor of Ada Lovelace. Write great code! Get help and give help!
It is our choices... that show what we truly are, far more than our abilities.


+14 votes

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?

asked in CSC490_Spring202021 by (1 point)

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.

2 Answers

+1 vote

Which components is this in?

answered by (-499 points)
+1 vote

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) {

return (

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.

answered by (1 point)

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?