Last updated 5/2022
MP4 | Video: h264, 1280x720 | Audio: AAC, 44.1 KHz
Language: English | Size: 1.79 GB | Duration: 4h 48m
Learn and Master Google Maps API by Building 3 Professional, Real-World Vue JS Location-Based Apps Like a Pro!
What you'll learn
Be able to build ANY location-based type Vue JS app you want.
Build a Location-Detector App using HTML5 Geolocation API & Google Maps Geocoding API.
Understand the basics of Vue JS - Components, Routes, Events, Data Binding, Nested Components, $EventBus.
Able to design professional UI Quickly using Semantic UI CSS Framework.
Build a CloseBuy App using Google Maps Places API - Nearby Search, Place Details, Autocomplete API.
Master Google Maps Distance Matrix API & Directions API by building a Distance Calculator App.
Google Maps Map Object, Markers, InfoWindows, Polylines, Common Server Errors.
It's also suitable for Developers who already know the basics of Vue JS or similar frameworks but want to explore the Google Maps API ecosystem.
Finally, we have also made this course approachable for programmers who already know some basics of Google Maps API and want to upgrade their skills.
If you want to take ONE COURSE and learn everything you need to know about Google Maps API ecosystem along with Vue JS, take this course!
Welcome to the Vue JS 2 and Google Maps API class, the only course you need to learn and code to build location-based web applications. Over 4,586+ students with an average rating of 4.1, my Vue JS 2, and Google Maps API course was one of the Best Selling courses on Udemy!In this course, you're going to be building 3 real-world location-based apps, start to finish from scratch, that will teach you pretty much all aspects of Google Maps API. I'll take you step-by-step through engaging and fun video tutorials that are rich in content! Throughout this fully practical course, we cover a massive amount of tools and technologies, including:Vue JSVue CLIComponentsRoutesEventsData BindingNested ComponentsAxios HTTP ClientFirebaseSemantic UI CSS FrameworkHTML5 Geolocation APICORSHoistingError Handling, and moreGoogle Maps APIObtain API KeyGeocoding APIPlaces Autocomplete APIPlaces API - Nearby Search RequestPlaces API - Place Details RequestMap ObjectMarker ObjectInfoWindow ObjectDistance Matrix APIDirections API - Directions Service JS LibraryDirections RendererPolyline ObjectCommon Google Maps Server Errors, and moreBy the end of this course, you will be fluently coding in Vue JS 2 and utilizing the Google Maps Platform to make your own location-based apps like a pro!Don't just take my word for it, see what some of my students had to say about this course:"Thank you so much for your Vue.js + Google Maps API course! I also appreciate how quick your course was, as I have trouble paying attention to longer courses. I am also a huge fan of Vue (I've tried learning React and Angular in the past, but quickly grew bored of them - Vue is so much more intuitive to me). I hope to see more courses from you in the future!!" - Tram Le"A very clear and concise course that provides you with enough information on google maps API being used with Vue to get you up and running. I highly recommend this course. I'd like to see maybe a section on how to populate the map with addresses stored in a database Thank you" - Brandon Oakley"This course is very helpful to me. Thanks and I hope you will make many sources helpful like this." - Long LeeAlthough the course is short, it is very rich in content. The teacher definitely made a point shot. I finished the course without getting bored and learned useful information. Thank you to the teacher. - Erdem Nayir"This course guides me in an easy manner and each section has very clear instructions. I would strongly recommend taking this Vue js course if you wish to learn quickly building location-based apps with Google Maps API" - Vikneswaran Thangarasu"This course was very easy to follow along with. The instructor spoke clearly and at a good pace. This course has everything you need to get started with Google Maps API and Vue.js!" - Jennifer Inwood"I am happy to learn this concept and I understand how to use Google Map API in vue.js These videos are very easy to recognize. I want more videos to learn about vue.js. However, I learn Google Maps for API concepts very easily. Thank you" - ViijayaraghavanREMEMBER. I'm so confident that you'll love this course that we're offering a FULL money-back guarantee for 30 days! So it's a complete no-brainer, sign up today with ZERO risk and EVERYTHING to gain.I will be here to support you throughout this journey, so if you ever have any questions, suggestions, or feedback, please do not hesitate to contact me!So what are you waiting for? Click the buy now button and join now!
Section 1: Getting Started
Lecture 1 Getting Started With Vue JS
Lecture 2 Obtain Google Maps API Key
Section 2: Build A Location Detector Vue JS App[HTML5 Geolocation API & Geocoding API]
Lecture 3 What You Will be Building by the End of this Module
Lecture 4 Create a Vue Component and Route
Lecture 5 Build User Location Form Using Semantic-UI
Lecture 6 What is HTML5 Geolocation API?
Lecture 7 Make An HTTP Request To Google Maps Geocoding API
Lecture 8 CORS Error & Solutions When Making HTTP Request to Geocoding API
Lecture 9 Common Errors & Solutions When Making an HTTP Request To Google Maps API
Lecture 10 Handling Vue JS Client and Google Maps API Server Errors
Lecture 11 How To Enable Google Maps Autocomplete API?
Lecture 12 How To Display User's Current Location On The Google Maps?
Lecture 13 Download The Completed Project Code
Lecture 14 Feedback Time!
Section 3: Build A CloseBuy App Using Google Maps Places API
Lecture 15 What You Will be Building by the End of this Module
Lecture 16 What is Google Maps Nearby Search Request?
Lecture 17 Create A CloseBuy Vue JS Component
Lecture 18 Make An HTTP Call To Google Maps Nearby Search Request
Lecture 19 Get Nearby Places Data When Using Google Maps Autocomplete API
Lecture 20 Display Places Data on the View
Lecture 21 Show Places Data on the Google Maps View
Lecture 22 Show Tooltip (callout) When A Marker is Clicked
Lecture 23 Show More Information About A Place Using Google Maps Place Details
Lecture 24 Auto Select Markers When List Item is Clicked in Vue JS
Lecture 25 Add Marker Clustering To The Close Buy
Lecture 26 Feedback Time!
Section 4: Distance Calculator Vue JS App Using Distance Matrix API & Directions API
Lecture 27 What You Will be Building by the End of this Module
Lecture 28 Create Distance Calculator Vue JS App Components
Lecture 29 Distance Calculator Vue JS App Layout
Lecture 30 Design Origin Destination Form Using Semantic UI CSS Framework in Vue JS
Lecture 31 Enable Google Maps Autocomplete API To Origin & Destination Input Fields
Lecture 32 What is Google Maps Distance Matrix API?
Lecture 33 Make An HTTP Request To Google Maps Distance Matrix API
Lecture 34 Display Vue JS Client & Google Maps API Server Errors
Lecture 35 Create A Firebase Project
Lecture 36 Store Route Data To The Cloud Firestore Database (Firebase)
Lecture 37 Show Route List Data On The Vue JS app
Lecture 38 Sorting Route Data By Distance & Duration Using Firebase
Lecture 39 How To Share Data Between Components Using $EventBus in Vue JS
Lecture 40 What is Google Maps Directions API?
Lecture 41 Make A Request To Directions Service & Render The Results On The Google Maps
Lecture 42 Show Multiple Route Direction Paths On The Google Maps At Once
Lecture 43 Replace Default Markers To Origin/Destination Addresses Using InfoWindow
Lecture 44 How To Create Custom Polylines in the Google Maps API
Lecture 45 Display Each Route With A Random Color Including Labels, Polyline, etc.
Lecture 46 Download The Completed Project Code
Lecture 47 Feedback Time!
Section 5: Bonus Lecture
Lecture 48 Bonus Lecture
Recommend Download Link Hight Speed | Please Say Thanks Keep Topic Live
Links are Interchangeable - No Password - Single Extraction