Last updated 8/2022Course Language EnglishCourse Caption English [Auto]Course Length 04:51:16 to be exact 17476 seconds!Number of Lectures 49
This course includes:
4.5 hours hours of on-demand video
12 article
Full lifetime access
Access on mobile and TV
Certificate of completion
4 additional resources
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.
Welcome to the Vue JS (Options API) and Google Maps API course, the only course you need to learn and code to build location-based web applications. Over 10,016+ students with an average rating of 4.7, my Vue JS, and Google Maps API course was one of the Highest Rated 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 CLIOptions API (which works either Vue JS 2 or Vue JS 3 Project, no problem )ComponentsRoutesEventsData 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 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. 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!Who this course is for:Beginner Vue JS Developers curious about Google Maps API.Beginner JavaScript Developers who want to learn about Google Maps API ecosystem.Beginner Web Developers who are looking to build location-based apps using Google Maps API.
Course Content:
Sections are minimized for better readability, click the section title to view the course content
2 Lectures | 11:49
Getting Started With Vue JS
05:39
By the end of this lecture, you'll be able to
Install and Be Up and Running With Vue.js on Your Mac
Obtain Google Maps API Key
06:10
By the end of this lecture, you'll be able to
Create An API Key from Google Cloud Platform
Enable Billing (to get the API to work)
Restrict API Key from Unauthorized HTTP calls, in other words, Quota Theft
Enable Different Google Maps API Libraries
12 Lectures | 57:33
What You Will be Building by the End of this Module
01:27
Students will be able to see what are we are building by the end of this section.
Create a Vue Component and Route
05:47
By the end of this lecture, you'll be able to
Create a Brand New Vue Component
Attach a Route to that Component
Build User Location Form Using Semantic-UI
06:43
By the end of this lecture, you'll be able to
Build a Simple But Powerful User Location Form Using the Semantic UI CSS Framework.
What is HTML5 Geolocation API?
06:53
By the end of this lecture, you'll be able to
Know-How to Get the User's Current Location in the form of Latitude and Longitude ( Geographic Coordinates) Using the HTML5 Geolocation API
Make An HTTP Request To Google Maps Geocoding API
06:11
By the end of this lecture, you'll be able to
Understand Geocoding & Reverse Geocoding API Services
Make an HTTP Request to Geocoding API Using Axios
Get a User's Location in the form of Latitude and Longitude
CORS Error & Solutions When Making HTTP Request to Geocoding API
02:28
By the end of this short tutorial, you’ll have a better understanding of:
Why CORS error is occurring?
What is CORS? and,
Find a few ways to fix CORS error:
Enable CORS
Make an HTTP Request from a Server
Use Proxy Server
Common Errors & Solutions When Making an HTTP Request To Google Maps API
03:22
Handling Vue JS Client and Google Maps API Server Errors
05:25
By the end of this lecture, you'll be able to
Catch Any Client or Server-side Errors and Display it on the Error Message View Element
How To Enable Google Maps Autocomplete API?
08:26
By the end of this lecture, you'll be able to
Enable an Autocomplete functionality to an input field that will show the suggested addresses in a drop-down list as the user starts typing
How To Display User's Current Location On The Google Maps?
10:04
By the end of this lecture, you'll be able to
Show the user’s current location on the Map whether the user gets a location by pressing the locator button or by selecting a specific address from the Autocomplete drop-down list.
Display Google Maps full screen behind the user location detector form
Download The Completed Project Code
00:30
Time To Test What You've Learned In This Module
15 questions
Feedback Time!
00:16
12 Lectures | 58:45
What You Will be Building by the End of this Module
01:47
By the end of this module, you will have learned how to
Build A Two Column Grid Layout Using Semantic UI CSS Framework
Get Places Data from Nearby Search Request API
Fix CORS Error
Display Places Data in a List Format as Well as on Google Maps Using Markers
Attach a Click Event to a Marker to Show the Pop-up Info Window
Add a Click Event to the Place Item on the Left Which Will Show the Appropriate Marker With the Info Window Visible on the Map
What is Google Maps Nearby Search Request?
03:09
After completing this lecture, you'll have
A Better Understanding of How the Nearby Search Request Works, Including the HTTP URL Structure, Required Route & Query Parameters and the Output Response Object
Create A CloseBuy Vue JS Component
11:27
By the end of this lecture, you'll be able to
Create a Brand New Vue Component and Route for the CloseBuy App
Make a Grid Layout Using Semantic UI CSS Framework
Build a User Input Form
Make An HTTP Call To Google Maps Nearby Search Request
07:03
By the end of this lecture, you'll be able to
Make an HTTP Call to Nearby Search
Understand Why the Request Fails the First Time
Understand What is CORS
Fix CORS Error Using Proxy Server and Get Places Data in the Response Object
Get Nearby Places Data When Using Google Maps Autocomplete API
00:32
Display Places Data on the View
05:29
By the end of this lecture, you'll be able to
Display Places Data in a List Format on the Left Column Under the Input Form
Show Places Data on the Google Maps View
07:48
By the end of this lecture, you'll be able to
Add Google Maps to the View
Display Place Data on the Map Using Markers
Show Tooltip (callout) When A Marker is Clicked
06:15
By the end of this lecture, you'll be able to
Show the Info Window Pop-up with Some Information About the Place When a Marker is Clicked
Show More Information About A Place Using Google Maps Place Details
08:32
By the end of this lecture, you'll be able to
Get More Information About a Specific Place Using the Place Details Service
Auto Select Markers When List Item is Clicked in Vue JS
06:08
By the end of this lecture, you'll be able to
Display the Selected Info Window of a Marker When a Place Item is Clicked
Add Active State to the Selected Place Item.
Add Marker Clustering To The Close Buy
00:20
Time To Test What You've Learned In This Module
15 questions
Feedback Time!
00:15
21 Lectures | 02:39:33
What You Will be Building by the End of this Module
02:24
In this module, we’re going to be learning about Google Maps Distance Matrix API and the powerful Google Maps Directions API as well as a little bit of Firebase by building a beautiful Distance Calculator App.
By the end of this module, you'll be able to:
Understand How To Split A Vue.js App Into Multiple Components
Make An HTTP Request To Google Maps Distance Matrix API
Store And Fetch Route Data Using Cloud Firestore Database (Firebase)
Share Route Data Between Vue Components Using $EventBus
Make An Asynchronous Request To Google Maps Directions Service
Display Directions Path For A Single Route On The Map
Show Directions Path For All The Routes On The Map At Once
Create A Custom Polyline On The Google Map
Assign A Random Color To Each Route
Create Distance Calculator Vue JS App Components
08:55
By the end of this lecture, you'll be able to:
Create A Route Form, Route List And DirectionsMapView Vue Components
Create A Page-Based Vue Component And Route For It
Add Child Vue Components To The Parent Component
Distance Calculator Vue JS App Layout
04:29
By the end of this lecture, you'll be able to:
Build A Layout For A Distance Calculator App
Place The Map View Behind The Route Form and Route List UI Elements
Design Origin Destination Form Using Semantic UI CSS Framework in Vue JS
04:17
By the end of this lecture, you'll be able to:
Install Semantic UI CSS Framework Via NPM To The Vue Project
Build An Origin And Destination Input Form Using Semantic UI CSS Framework
Enable Google Maps Autocomplete API To Origin & Destination Input Fields
11:20
By the end of this lecture, you'll be able to:
Add Google Places Autocomplete To The Origin And Destination Input Fields
Add Place Changed Event To The Autocomplete Object To Get Selected Addresses
Refactor The Autocomplete Code To Avoid Repetition
What is Google Maps Distance Matrix API?
05:38
By the end of this lecture, you'll be able to:
Know What Google Maps Distance Matrix API Is
Understand Required Request Route And Query Parameters To Make An HTTP Call
Understand The Structure Of The Output Response Data
Make An HTTP Request To Google Maps Distance Matrix API
09:29
By the end of this lecture, you'll be able to:
Install Axios HTTP Client Via NPM
Making An HTTP Call To Google Maps Distance Matrix API
Get Travel Distance And Duration Data From The Response Object
Display Vue JS Client & Google Maps API Server Errors
08:18
By the end of this lecture, you'll be able to:
Display Client And Server Errors When Making An HTTP Request To Google Maps Distance Matrix API
Show And Hide The Spinner When Needed
Create A Firebase Project
01:17
By the end of this lecture, you'll be able to:
Create A Firebase Project
Install Firebase To Your Vue.js Project
Add Firebase Configuration Code To The Vue Project
Store Route Data To The Cloud Firestore Database (Firebase)
07:41
By the end of this lecture, you'll be able to:
Install Firebase On The Vue Project
Initialize Firebase
Understand How The Cloud Firestore Data Structure Works
Store Route Data To The Cloud Firestore
Show Route List Data On The Vue JS app
12:35
By the end of this lecture, you'll be able to:
Fetch Route Data From Cloud Firestore
Display Route Data In A List Format
Sorting Route Data By Distance & Duration Using Firebase
12:29
By the end of this lecture, you'll be able to:
Sort Route Data Based On Travel Distance And Duration
Create A Single Function And HTML Element For All Four Sorting Scenarios Such As Long Or Short Distance And Fast Or Slow Duration
How To Share Data Between Components Using $EventBus in Vue JS
07:01
By the end of this lecture, you'll be able to:
Share Data Between Vue Components Using EventBus
Send Route Data To A Vue Component Using $emit()
Receive Route Data From A Vue Component Using $on
What is Google Maps Directions API?
06:13
By the end of this lecture, you'll be able to:
Know What Google Maps Directions API Is
Understand The Difference Between Directions API Vs Directions Service
Know The Required Request Route And Query Parameters To Make A Call To Directions Service
Understand What The Output Response Object Will Look Like
Make A Request To Directions Service & Render The Results On The Google Maps
09:00
By the end of this lecture, you'll be able to:
Create A Google Maps Map Object
Send A Request To Google Maps Directions Service To Get Directions Data
Render The Directions Data In The Form Of A Polyline Path On The Map Using DirectionsRenderer
Show Multiple Route Direction Paths On The Google Maps At Once
10:57
By the end of this lecture, you'll be able to:
Show All The Route Data On The Map In The Form Of Polyline Paths
Loop Through The Route Data
Render The Directions Data In The Form of Polyline Paths On The Map Using DirectionsRenderer On Each Iteration
Replace Default Markers To Origin/Destination Addresses Using InfoWindow
15:34
By the end of this lecture, you'll be able to:
Remove Default Origin And Destination Markers In The Directions Renderer
Add Origin And Destination Addresses At The Start And End Of The Polyline Path
Create Multiple InfoWindows For Origin Address, Destination Address And Also For The Travel Distance & Duration In The Middle Of The Polyline
How To Create Custom Polylines in the Google Maps API
12:01
By the end of this lecture, you'll be able to:
Create A Custom Polyline Object
Create An Overlay Polyline Path That Will Connect The Origin Address To The Starting Directions Path As Well As From The Ending Directions Path To The Destination Address
Display Each Route With A Random Color Including Labels, Polyline, etc.
08:18
By the end of this lecture, you'll be able to:
Generate A Function That Will Create A Random Hex Color
Save A Random Color To Each Route Object
Set The Random Color To The InfoWindow Labels As A Background Color
Change The Directions Path Polyline Color
Download The Completed Project Code
01:21
Time To Test What You've Learned In This Module
15 questions
Feedback Time!
00:15
2 Lectures | 03:34
Up and Running With Vue 3 Project
03:29
Bonus Lecture
00:05
4.19
(199 course ratings)
1
2/199
2
3/199
3
18/199
4
57/199
5
119/199
JOIN OUR WHATSAPP GROUP TO GET LATEST COUPON AS SOON AS UPDATED
If you like to get inspired by great web projects, you should check out Made with Javascript. If you have a project that you wish to share with the world, feel free to submit your project on Made with Javascript Club website.
Free Online Tools And Converters for your use
URL Encoder
Input a string of text or a URL and encode the entered string
FAQ: Udemy Free course Most frequent questions and answers
Does Udemy offer Free Udemy coupons?
Yes, Udemy is the largest online education platform, with the broadest selection of video-on-demand courses and qualified instructors available to meet your needs. At theprogrammingbuddy.club we curate the latest udemy coupons, their expiry, and the number of uses left of these udemy coupons.
How to get free Udemy courses?
There are two ways to get free Udemy courses:
Go to udemy.com and search for your desired course category. Then select free from the filter options.
You can also get paid courses for free if you have a coupon. You can head to theprogrammingbuddy.club, where you can get a daily udemy paid course for free.
How to get Udemy Certificates for free?
Udemy offers certification on completion of each course. In order to receive a certificate of completion from Udemy, you need to complete your course 100%. There is a simple hack, you can open a video and jump on the timeline to complete a lecture.
To download the certificate from Udemy, you need to head over to your account on a desktop browser. Udemy certificates can't be accessed on the mobile app.
Do Udemy courses expire?
No, once you enroll, you will have lifetime access to the course. You can complete the course on your schedule.
Why are the Udemy instructors giving away free Udemy Coupons?
Every instructor has worked for hours on each of their courses. As new courses get launched, the instructors have no way to get their course in front of an audience to get some feedback. So, instructors share free coupons for their courses to get feedback from the students. We attheprogrammingbuddy.club work with these instructors to get their courses available to our buddies.
Is Udemy safe to use?
Yes, payments on Udemy are safe. It is no different than paying for other services on an application or website and inputting your payment information before receiving your goods. Just be sure to keep your account secure, do not share your udemy accounts.
Can Udemy courses get you a job?
Earning a skill is more valuable than earning a job these days. Skills are your most valuable asset. They can help you qualify for jobs you want and get promoted to more advanced positions within your organization. Unfortunately, it is difficult for many people to balance taking courses with work and family obligations. We have had many students, who have taken just Udemy courses, started a job as well as started freelancing with the skills they have learned.