Advanced Markers not showing / Usage with other libraries

[chris-iliopoulos]

Hello everyone and congrats on the work you guys are doing in this library! This is my first post here, so after carefully making sure that this has not been asked before, I want to ask first of all if this library "plays nice" with other libraries (like for example the older react Google maps libs). What I mean by it is this, can someone use some of this library's components in conjunction with components from other libraries?

In my case, I want to use the AdvancedMarker component with one of the older/other react Google maps libs, and if I am not mistaken from the AdvancedMarker's implementation the reason why the Advanced Markers are now showing to my map is because this component gets its map from the context. So, if I don't use the APIContext component I have a problem, right? Any thoughts on this? Your input would be greatly appreciated!

[usefulthink]

My general assumption would be that it won't work, since every library has their own way to handle objects created with the maps API. Another problem is that every library likely implements some way to load the maps api itself. This conflict will likely lead to errors, problems, or both.

One possible exception would be if both libraries use the new google.maps.importLibrary() loader and take care to use an existing loader (like this library does) or otherwise deal with a google maps API that has already been loaded. They would also have to allow communication via the API objects (for example by passing the google.maps.Map object into a component, which you can get via useMap()).

That said, most of the magic of this library is in the map component and everything around it is rather simple to implement for any library as long as you can get access to the map instance used.

[chris-iliopoulos]

Thanks for the quick response! So, I guess this means that there will be no plans to make the components able to work with other libraries, right? Like say for example the AdvancedMarker component would be able to get the map as a prop as well not only through the context.

[benjaminsinaiko]

The library exports the GoogleMapsContext - not the cleanest but you can use it to create and wrap the marker(s) in a provider, and use a different map as the value 😬.

[usefulthink]

That is actually a pretty wild idea right here 🧙.

Just to expand on that a bit: our AdvancedMarker component uses the useMapsLibrary hook to make sure the markers library is available. That in turn uses the APIProviderContext and its importLibrary function to load the library (essentially a react-ish version of google.maps.importLibrary, defined here).

The other thing it needs is the GoogleMapsContext, which is just a container for the google.maps.Map instance.

So if you build yourself a wrapper component that mimicks those two providers, the AdvancedMarker component wouldn't be able to tell the difference.

I personally think this is a bit too wild and the providers are explicitly not part of the public API, but I'm also not judging if anyone wants to try it. Still, it's probably easier to just copy the AdvancedMarker component and port it to another library :)

[JorgeSivil]

Thank you for the library.
I tried with with https://www.npmjs.com/package/@react-google-maps/api and had problems using the Advanced Markers
I then tried the hard way, going with the official wrapper, but had a lot of issues to keep state, call functions, re render my marker with "active state" to show the hidden info window...

I copy pasted a very small example from one of the bugs #171 and it just worked.

I was so amazed that I just wanted to say thank you.

[chris-iliopoulos]

Thanx everyone for the feedback! I actually did exactly that ... I created a couple of wrapper components as you suggested and used the logic from your lib and it worked like a charm! So, thanks again for the feedback and for this library! Keep doing great work!