Google Maps & Google Places in React

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/use-pla...
Reach Combobox: https://reacttraining.com/reach-ui/co...
Snazzy Maps Style: https://snazzymaps.com/style/8097/wy
Browser Geolocation: https://developer.mozilla.org/en-US/d...