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