Google Maps With React
Which Node Package Should I Use?
The Situation
Your working on a React-based application and you want to implement Google Maps to display the location of your business or provide directions to a user. At this point, you head over to the Google Maps JavaScript API documentation and are quickly overwhelmed by the plethora of information available. Surely platforms as popular as React and Google Maps have ready-made node packages available to ease the learning curve required to implement a map.
A quick Google search reveals several options that all seem to be very similar as seen in Figure 1. Now you are faced with another question, which one of these meets your needs? Well the answer to that question really depends on your needs but in most cases I would recommend skipping the node packages and using the vanilla Google Maps JavaScript API.
Node Package Comparison
A quick comparison of the available node packages shown in Figure 1 is displayed in Figure 2 below. Note that this is not a deep dive into each feature available, just a surface level inspection. From figure 2 it is seen that although “react-google-maps” is the most feature rich but it has been several years since it has been updated. The other packages are not as feature rich but do support displaying a map and placing some markers which is often all you need. It can also be seen that the weekly downloads for all these packages is relatively low in comparison to the popularity of Google Maps. Finally, it is also worth noting that although all node packages have documentation but the quality of the documentation is varying and can be a bit confusing in my experience.
So these packages support basic map functions but what if you want to draw custom poly-lines, pull elevation data, customize the map interface and appearance? The chances are the node packages will not handle this functionality that is built into the Google Maps JavaScript API.
Conclusion
In my experience, it is easier, faster, and more feature rich to use the vanilla Google Maps JavaScript API. The learning curve is not nearly as steep as it may seem and the documentation is very thorough. The documentation also includes several examples to cover common use cases. Using the API from Google ensures you have the latest map data and version and saves you time from learning 3rd party package that may not be maintained.
The one thing the Google documentation doesn't cover is adding your API key the React way. Figure 3 shows and example of adding the the required Google Maps script with your API key on component load. Note that in this example the API key is stored as a React environment variable REACT_APP_GOOGLE_MAP_API.
useEffect(() => {
if (!document.getElementById("googleMapScript")) {
const googleMapScript = document.createElement('script')
googleMapScript.id = "googleMapScript"
googleMapScript.src = `https://maps.googleapis.com/maps/api/js?key=${process.env.REACT_APP_GOOGLE_MAP_API}&libraries=places`
window.document.body.appendChild(googleMapScript)
}
},[])Figure 3: React Way to add Google Maps API Script on Component Load
