Building a Google Map in React
In this article I’m going to walk you through building a Google Map Component in React without a 3rd party library like google-map-react and google-maps-react. Instead we’re going to use Google’s Maps JavaScript API directly in our component with some good old fashioned vanilla JavaScript. When evaluating whether to use a dependency or to write your own, it’s a good idea to ask yourself the following:
1. How many dependencies does this library use?
2. What is the bundle size of this library (Bundle Phobia)?
3. Can I implement the required minimal functionality myself?
4. Do I need this library to be battle tested?
In our case, both libraries used minimal dependencies (0–3) and had a minified bundle size of 6–12KB. These numbers are by no means outrageous but given the low-risk nature of the task and the minimal functionality required, we decided it would be a good (and fun) choice to write our own.
** Disclaimer: This tutorial assumes a working knowledge of JavaScript and React. We’ll follow the steps laid out in Google’s Maps JavaScript API Tutorial and add our own React-y spin on things as we go.
Step One: Create a div element named “map” to hold the map.
For the map to display on a web page, we must reserve a spot for it. Commonly, we do this by creating a named div element and obtaining a reference to this element in the browser’s document object model (DOM). We could obtain this reference using the React Ref API or the DOM method getElementById. The snippet below demonstrates both:
Step Two: Define a JavaScript function that creates a map in the div.
Since we’re doing this the React-y way, we’ll create an instance method on our GoogleMap class. To instantiate Google’s Map class we’ll pass in a reference to our map element (from step 1) alongside two mandatory options: centre and zoom. This particular map will be zoomed into the streets of Toronto and centred on the CN Tower landmark.
We’ve chosen to disable the defaultUI to keep the map as simple as possible. You can customize your own map by adding or removing controls, which is described in more detail in the documentation.
Step Three: Load the Maps JavaScript API using a script tag.
This can be done in one of two ways. The first is to add your script tag directly into your index.html file and the second is to create a script tag on the fly inside our Google Map Component. For the purposes of encapsulating all responsibility within our React component, we’ll opt for the latter.
Using some vanilla JavaScript we’ll create a script element, set it’s src property to location of the JavaScript file that loads all the resources needed to use the Maps API and then append it to the document body.
Step Four: Create our Map
We’re almost there! The second last step in creating our map is to call our createGoogleMap function (from step 2). One caveat to mention when calling this function is that it is very possible to encounter a race condition where we try to instantiate a new Map class before our script has finished loading and receive an error where window.google is undefined. To prevent this from happening we will add an event listener to our script tag to ensure that all the required files have loaded before executing createGoogleMap.
Step Five: Adding a Location Marker
You may have noticed in the snippet above that we stored the instance of our map object. The reason behind this is that we’ll need this same instance to instantiate Google’s Marker class. Similar to how we wrote a function to create a map (in Step 2) we will write a function to create a marker, this time passing in the mandatory options: position and map. This particular marker will be dropped on our map in the exact location of the CN Tower landmark.
The final step here is to execute this function inside our event listener from step 4 and voilà ✨, you have a Google Map completely encapsulated in one React component without any 3rd party libraries 😎.
Thanks for reading. Please reach out for any questions or feedback — We’d love to hear it.
