Slap a Map in that App

A guide to working with The Google Maps API in a React.js App.

If you’re like me, you love a good map, particularly if it’s interactive. A clickable map, goes a long way towards enhancing a user’s experience. They’re tactile, informative, visually engaging and actually not all that hard to work with.

First off, there are a bunch of Map APIs out there, and you can certainly find which ever one suits your needs/preferences best, but for the purposes of this blog we’ll be dealing with the Google Maps API, since it’s extremely common, and the documentation is pretty straightforward.

Once you’ve gone to the Google Maps api site, and gotten yourself a key, the first thing we need to do is get our map on the page.

Here we don’t really need to get into the nitty gritty of what’s going on, as this is pretty much just plug and play to get the map screen in your app. Some key notes though…

1. that url after ‘loadscript’ in the first image, is just the Google Maps API with your customized key tacked on the end.
2. in the ‘initMap’ function, you can choose a specific latitude and longitude to focus on. For my purposes I chose to center on Denver, since that’s where I live, and the app is a primarily for fishing in Colorado.
3. The second image is code that needs to just plugged in at the very end of your map page after the render.

Now let’s focus on making this map useful for our specific app. First off we are going to have a few locations (fishing holes in this case) that are from our backend, which we want to appear on the map.

To do this we are first going to perform a simple fetch request for all locations (mine are located on a rails api backend). Then we are going take that result and use it to set our state.

Once this is done we are going to call that renderMap() function we previously wrote.

The render map function then calls the initMap() function, which we also already wrote. In with this function we are going to map over all the locations in our state, and for each location we are going to create a couple variables, one is the contentString, which is just the name of each location.

Then we are going to make a mark for each location. Here you can see that there are certain built in states that each marker has with it, that we need to give values to.

1. Position: Made up of two values — one for longitude, and one for latitude— which are taken from my backend. Note that these are referred to as ‘lng’ and ‘lat’, by the api.
2. Map: We’ve already defined our map above. So no need to really think about this one.
3. Title: For us we are using the name of each of our locations.
4. Icon: This is the image that will appear for each marker on the map. Since we have a fishing app, we are going to use a small fish icon. Here, I’ve previously imported the image file as MarkerImage, at the beginning of the component.

5. id: Like ‘Title’, this one is pretty self explanatory. It’s just the id of each location. This will be crucial for making these markers clickable.

Next we are going to add a couple of event listeners on each of these markers. One of these is a mouseover listener, which will be used to show an info window, which displays the contentString, or name of the the location.

The other listener in the above code is enacted on click. Here this will use our react router, which is already set up to route us to the corresponding page of the marker that we’ve clicked on. So, if we click on the marker for Lake Dillon, we’ll be routed to the following page:

And there you have it! You now have the ability to implement a simple Google Map feature in your app and populate it with markers from your back end that dynamically rout you to specific pages.

Next week we’ll look at how to allow users to add more points on this map that work in the same way as the ones we have in our backend do!