Google Maps in React Demo

This video covers a Bear Sighting React App where we learn how Google Maps, Google Places, and browser geolocation works. All using modern React (hooks) and up to date packages for 2020.

Links

• Source Code: https://github.com/leighhalliday/google-maps-react-2020
• Video: https://youtu.be/WZcxJGmLbSo
• Google Maps React: https://www.npmjs.com/package/@react-google-maps/api
• Google Places React: https://www.npmjs.com/package/use-places-autocomplete
• Reach Combobox: https://reacttraining.com/reach-ui/combobox/
• Snazzy Maps Style: https://snazzymaps.com/style/8097/wy
• Browser Geolocation: https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/getCurrentPosition

API Keys

For this demo to work, please create a Google Map API Key, and ensure that the two services below are enabled... otherwise it won't work! This API key must be in the environment variable REACT_APP_GOOGLE_PLACES_API_KEY.

• Maps JavaScript API
• Places API
• Geocoding API