Maps…in React!

Every since I started my developer journey, I have been set on building software that uses maps. Maybe it’s because as an avid walker, Google Maps is the easiest way for me to comprehend my position geographically. It could also be my strong propensity towards visuals. If you tell me how to get somewhere, the sentences and words will vanish into my mind’s ether. But show me a map with those adorable red markers, and I feel 100% better about getting where I need to go.

So when looking for a way to incorporate the Google Maps API with my favorite front-end framework React.js, I was a bit distraught to find out that there was no documentation on Google’s website on how to do this! It was the first time that I ever had to really go rogue and dig deep into the npm library by myself for the best choice.

My hope was to find a library that would allow me to use Google’s wonderful classes such as Map, Info-window, and of course, Markers as React components. I found an awesome blog post detailing how to set up a library that did all these things, but when I actually got down to implementing the components I couldn’t get the markers to render on the page. I asked my instructor at Grace Hopper to help me debug, and we ended up finding a problem with the module. Changing the code of the module itself seemed like a bad idea, so I made a note to submit a pull request to that user and moved on to another library.

In the end, I went with Tom Chen’s awesome library that even has a link to a demo site with code samples. My capstone team used this library to build our social networking app, Bodhi. I also gave a tech talk to my cohort on how to use the library. Definitely check it out, and happy map-making!