loadGoogleMaps React component

September 18, 2017 | Javascript, Personal Projects, React

loadGoogleMaps is a small React component which loads Google Maps in a manner more consistent with the React ecosystem. I used a few different npm packages prior to this and they seemed to be overly complex.

Instead of hardcoding the Google Maps url into our index.html file, we set our API key somewhere in our app ( in a constants file, perhaps ) and pass that value to the loadGoogleMaps function, along with an array of Google Maps libraries we want to load.

Call it when our application mounts for the first time:

And presto! You’re all set to start using Google Maps in your React app. Currently available as a Gist here and you’ll need to install the little-loader and query-string packages manually but I might refactor into an actual npm package at some point.

 

Leave a Reply

Your email address will not be published. Required fields are marked *