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...
En esta página del sitio puede ver el video en línea Google Maps & Google Places in React de Duración hora minuto segunda en buena calidad , que subió el usuario Leigh Halliday 18 mayo 2020, comparta el enlace con amigos y conocidos, en youtube este video ya ha sido visto 142,302 veces y le gustó 2.8 mil a los espectadores. Disfruta viendo!
