I wanted to try Google Maps in my React front-end, and figured that probably someone has written a React wrapper for Google Maps, or perhaps Google itself had taken it on at some point.
Here are some open-source packages that show up in an npm search:
- react-google-maps, last updated five years ago but still gets 150k downloads/day.
- @react-google-maps/api, a "complete re-write of the (sadly unmaintained) react-google-maps"
- google-map-react
- google-maps-react 😂
- @google-maps/react-wrapper
- simple-react-google-maps [Sure, Jan]
- react-maps-google [Now I'm just annoyed]
- react-hook-google-maps [For those of you addicted to custom hooks for everything]
- react-google-maps-loader
- react-static-google-map
- google-maps-react-17 [I guess the 17 is for React v17? Great, that will never go out of date]
- google-maps-js-api-react
There are more, of course. I feel like I'm in NYC looking for real Original Ray's. Or maybe touring a graveyard.
So! This is frustrating for a number of reasons:
- They all solve the problem slightly differently, so the resulting React code can look vastly different depending on which one you use.
- Looking for help on Stack Overflow or Google is difficult, because I keep winding up on help for a different repository.
- The varying degrees of unmaintainedness [new word copyright me] of these repositories by their owners makes it hard to pick one; and I don't have a whole lot of faith that the one I pick will be maintained long-term.
- My ultimate solution doesn't feel very React-like. A lot of these packages tackle the simple case of adding a map element and some markers, but I wanted to go a little further than that by clustering close-together markers and adding a search bar. I would expect to be able to add child elements to a parent map element that do that, but could not find a package that gives me that option. I think I have a solution that works, but it involves creating a React useRef hook to manipulate the map object directly; not very React-y, definitely feels like I'm breaking some rules.
- I'm sure there's a React developer out there who will say, "Oh of course you should use react-maps-google, you fool! It's obviously the best one!"
I like React for simple things, and it's been good for quickly building up my frontend, but often when I get into more complicated scenarios, finding the correct path forward is non-obvious to say the least. And this is a framework that came out nearly 10 years ago! There have been so many fundamental changes to React that it's hard to keep up with the latest best practices, and among the community there seems to be a lot of disagreement on that anyway. This situation with the dozen-plus possible Google Maps packages feels like more of the same chaotic soup.
