How to use the same google map component instance on any child?

I'm looking for a way to use the same google map instance anywhere in my app. Each map load is charged after all...

I'm using google-map-react. A new Map instance is created on ComponentDidMount, so to me it makes sense that the 1st requirement would be to keep that component mounted, most likely near the top of the component Tree.

The end result should be that any component that wants to render the map should:

• Mount the map component if it still hasn't been mounted.
• Somehow recycle the DOM node where the map is mounted at.

Any help with this will be appreciated.

You can try to implement it by using Portals

Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.

However, every change the user makes to the map (zoom,layers,etc) will remain, so it would make sense you also reset the map to the initial state whenever you render the map in another section.