How does @visgl/react-google-maps compare to @googlemaps/extended-component-library/react?

[rodrigofariow]

Hi all 👋

I first arrived upon a react wrapper using @googlemaps/extended-component-library, officially supported by google:
https://github.com/googlemaps/extended-component-library/tree/main/src/react

Then, on a blog post announced by google I see @vis.gl/react-google-maps being promoted as the react library to use for google maps.

What library do you recommend to use?

I see @googlemaps/extended-component-library/react is still very much in early stages and does not even have a react wrapper component for the web component gmp-advanced-marker so I'm leaning towards @visgl/react-google-maps.

Thank you in advance

[wangela]

Extended Component Library only covers the components featured in that library, whereas this library has more full coverage of the Maps JavaScript API. I recommend you upvote and follow #91 to see those extended components supported in this library.

[usefulthink]

This repository is an interesting choice to ask that question 😄

The react parts of the extended components library (ECL) are mostly a very thin wrapper around the web-components provided by the ECL. They might even become obsolete in the upcoming React 19.x version, which has some significant improvements in how web-components can be used in a react-application. So it's essentially not much different from directly using the web-components together with the regular Google Maps JavaScript API. If that already covers your use-cases, and the ECL provides components forwhat you need to do, that would also be my recommendation.

The ECL has to be seen in combination with the web-components provided by the maps API itself (currently thats only gmp-map and gmp-advanced-marker, but it looks like google is embracing WC and will continue to provide new features as web-components).
Both together can solve a nice variety of use-cases, which might be enough for what you need.

However, besides the components, the ECL doesn't really integrate with React the way this library does, and it doesn't solve the same problems. This library is focused on providing React bindings that help you implement solutions in React for any use-case you have related to the Google Maps API, while staying as close to typical react-patterns as possible. One example for this is state handling: with the web-components you will have a hard time implementing something like the top-down data-flow pattern typically used in React, while this library has built-in support for that.

To sum this up: if you just need a map with some markers and don't care too much how users interact with it, you will be alright if you just use the <gmp-map> and ECL components. But if you build an application that integrates a map more deeply, using this library would be my recommendation.

[rodrigofariow]

Thank you for the replies guys!
I'm clarified

Cheers