Everyone uses Google Maps, and lots of people use React. You’d think a Maps in React app would be easy, right? I did. And I was surprised that the answer seemed to be no. It’s not that there aren’t a lot of examples out there, it’s finding one that I could make work in my preferred environment and in ES2015.

Many examples I saw I had to pass on immediately; ones that used React.createClass and older Google Maps API versions were pretty common. I did this on principle, but the example went home when I realized that in between writing the code and writing this post, React released v15.5.0 which is the first step towards deprecating React.createClass completely. Good thing I wasn’t using it! My experience with React Fishtank served me in good stead here.

To minimize the difficulties in adapting any example code I found, I looked specifically for something which worked to serve a map first and could be – hopefully – adapted to my CRA environment second. With those criteria in mind, I searched and found this helpful Codepen: http://codepen.io/anon/pen/PNooKz

Right up front I had high hopes for this one. Does it serve a map? Sure does! I can see it right there. Is it using the syntax I want? Sure is, I can see it right there. Is it something where I can read the code well enough to understand what each function is doing? Yes. So the only hurdle left is can I make it work in a CRA environment instead of Codepen? Sure can.

The live site is available here: https://peterbreen.github.io/gmapreact/
The code is available here: https://github.com/PeterBreen/gmapreact

As a map it’s not very exciting, but as a platform for future development I hope somebody else finds it useful. I know I will, at least.