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.

Course

Want to go deeper with Next.js? Join me in my Next Level Next.js course where over 29 videos and 8 hours of content we'll build a full application from start to finish. We use TypeScript, GraphQL, Prisma, Apollo, Mapbox, Firebase and lots more. https://next.leighhalliday.com/

00:00 Introduction
03:00 Adding Google Scripts
06:00 Adding Google Map
13:15 Adding Markers via onClick
16:30 Styling Marker Icons
20:00 Saving Map Ref
22:00 Showing Selected Marker in InfoWindow
27:07 Adding Google Places Search
31:10 Displaying Search Suggestions
36:00 Fetching Selections Lat & Lng
39:15 Panning Map Programmatically
43:30 Adding Browser Geolocation
45:20 Fixing Combobox Mistake
49:00 Review

APIs that need to be enabled:
Geocoding API
Maps JavaScript API
Places API

Join me on Discord!   / discord  
Source Code: https://github.com/leighhalliday/goog...
Google Maps React: https://www.npmjs.com/package/@react...
Google Places React: https://www.npmjs.com/package/usepla...
Reach Combobox: https://reacttraining.com/reachui/co...
Snazzy Maps Style: https://snazzymaps.com/style/8097/wy
Browser Geolocation: https://developer.mozilla.org/enUS/d...