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. <\/p>\n
Many examples I saw I had to pass on immediately; ones that used To minimize the difficulties in adapting any example code I found, I looked specifically for something which worked to serve a map first<\/em> and could be – hopefully – adapted to my CRA environment second<\/em>. With those criteria in mind, I searched and found this helpful Codepen: http:\/\/codepen.io\/anon\/pen\/PNooKz<\/a><\/p>\n 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.<\/p>\n The live site is available here: https:\/\/peterbreen.github.io\/gmapreact\/<\/a> 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.<\/p>\n","protected":false},"excerpt":{"rendered":" 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 … Continue reading React Maps<\/span> React.createClass<\/code> 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<\/a> which is the first step towards deprecating React.createClass<\/code> completely. Good thing I wasn’t using it! My experience with React Fishtank<\/a> served me in good stead here.<\/p>\n
\nThe code is available here: https:\/\/github.com\/PeterBreen\/gmapreact<\/a><\/p>\n