Google Maps & Google Places in React

Veröffentlicht am: 18 Mai 2020
auf dem Kanal: Leigh Halliday

142,302

2.8k

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...

Auf dieser Seite können Sie das Online-Video Google Maps & Google Places in React mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer Leigh Halliday 18 Mai 2020 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 142,302 Mal angesehen und es wurde von 2.8 tausend den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!