This week: Maps Integrations
This week we are focusing on React components that integrate with different map APIs. A member of our Fullstack React team, Ari Lerner, has written an in-depth article about creating a Google Maps React component. In addition to Ari's Google Maps article, we'll look at some other components that utilize the Google Maps and Google Places API. We also look at the features of an open source project from Uber that uses the Mapbox GL library. And, if you're looking into using a map in your next React Native project, we've got a github repo that's just what you've been looking for.
Cheers!
-Sophia & Nate
Code
Learn how to create a Google Maps React component
Our very own Ari Lerner has written a complete and thorough tutorial on how to integrate Google Maps into React. Integrating a third party library can be somewhat complicated and confusing. He breaks it down into discrete steps with lots of code examples. The complete code is on Github and try out the live demo here
fullstackreact.com
Location dropdown with auto complete
This React component has two parts to it--a dropdown to select a country and then a text input with an auto complete feature for the user's city. It uses the Google Maps API to fetch locations so there's no need to hard code any dropdown data for countries or cities.
github.com
A Geo suggestion React component
Similar to the React component above, this React component provides you with an input box and auto suggests locations. This component uses the Google Places API instead of the Google Maps API. The Google Places API allows you to get more information than just a street name or city. You can get information on the location of businesses, restaurants and stores. This React component is a more fully fledged component with a variety ways to customize the results the user sees. See a demo here.
github.com
Mapbox GL React component
Once you've mastered the techniques you learned in Ari's blog post, take a look at another map integration from Uber. Uber has a created a React wrapper for the Mapbox GL library. Mapbox GL is a JavaScript library that uses WebGL to render maps. Check out the interactive documentation here.
github.com
Adding map integration to React Native apps
Adding maps to web application is one thing, adding it to a React Native application is whole different ball game. Luckily, there's a repo for that! This React Native library has lots of features to make it easy to integrate maps into your React Native app.
github.com
About
Fullstack React: The Book
Learn React the right way with Fullstack React: The Complete Guide to ReactJS and Friends. If you've already purchased a copy, you automatically get access to the latest changes. If you haven't purchased a copy yet, don't delay and get the most up to date and comprehensive information and tutorials.
fullstackreact.com
Like what you've been reading from Fullstack React? You can help us spread the word. Please forward this email to you friends (and let them know they can subscribe here).
Follow us on Twitter
Curated with love by Nate Murray, Sophia Shoemaker and the Fullstack.io team.
Suggestions are welcome, just reply to this email - we'd love to hear from you.