Development
Web Development
Vue JS
Vue JS 2 + Google Maps API: Build Location Based Web Apps
4.5 (43 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
1,151 students enrolled

Vue JS 2 + Google Maps API: Build Location Based Web Apps

Learn and Master Google Maps API by Building 3 Professional, Real-World Vue JS Location-Based Apps Like a Pro!
Bestseller
4.5 (43 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
1,151 students enrolled
Created by Raja Tamil
Last updated 8/2020
English
English [Auto]
Preview this course
Vue JS 2 + Google Maps API: Build Location Based Web Apps
Current price: $139.99 Original price: $199.99 Discount: 30% off
5 hours left at this price!
Buy now
30-Day Money-Back Guarantee
This course includes
  • 4.5 hours on-demand video
  • 9 articles
  • 4 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Be able to build ANY location-based 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
Course content
Expand all 46 lectures 04:44:14
+ – Getting Started
2 lectures 11:49

By the end of this lecture, you'll be able to

  • Install and Be Up and Running With Vue.js on Your Mac


Getting Started With Vue JS
Preview 05:39

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


Obtain Google Maps API Key
Preview 06:10
+ – Build A Location Detector Vue JS App [HTML5 Geolocation API & Geocoding API]
11 lectures 54:27

Students will be able to see what are we are building by the end of this section.

What You Will be Building by the End of this Module
Preview 01:27

By the end of this lecture, you'll be able to

  • Create a Brand New Vue Component

  • Attach a Route to that Component

Create a Vue Component and Route
05:47

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.

Build User Location Form Using Semantic-UI
06:43

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


What is HTML5 Geolocation API?
06:53

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

Make An HTTP Request To Google Maps Geocoding API
06:11
Common Errors & Solutions When Making an HTTP Request To Google Maps API
02:44

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

Handling Vue JS Client and Google Maps API Server Errors
05:25

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 Enable Google Maps Autocomplete API?
08:26

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


How To Display User's Current Location On The Google Maps?
10:04
Download The Completed Project Code
00:30
Time To Test What You've Learned In This Module
15 questions
Feedback Time!
00:16
+ – Build A CloseBuy App Using Google Maps Places API
11 lectures 58:25

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 You Will be Building by the End of this Module
Preview 01:47

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

What is Google Maps Nearby Search Request?
03:09

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


Create A CloseBuy Vue JS Component
11:27

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



Make An HTTP Call To Google Maps Nearby Search Request
07:03
Get Nearby Places Data When Using Google Maps Autocomplete API
00:32

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

Display Places Data on the View
05:29

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 Places Data on the Google Maps View
07:48

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 Tooltip (callout) When A Marker is Clicked
06:15

By the end of this lecture, you'll be able to

  • Get More Information About a Specific Place Using the Place Details Service

Show More Information About A Place Using Google Maps Place Details
08:32

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.

Auto Select Markers When List Item is Clicked in Vue JS
06:08
Time To Test What You've Learned In This Module
15 questions
Feedback Time!
00:15
+ – Distance Calculator Vue JS App Using Distance Matrix API & Directions API
21 lectures 02:39:27

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 Map

  • Assign A Random Color To Each Route


What You Will be Building by the End of this Module
Preview 02:24

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

Create Distance Calculator Vue JS App Components
08:55

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


Distance Calculator Vue JS App Layout
04:29

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


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:

  • 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

Enable Google Maps Autocomplete API To Origin & Destination Input Fields
11:20

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


What is Google Maps Distance Matrix API?
05:38

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

Make An HTTP Request To Google Maps Distance Matrix API
09:29

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

Display Vue JS Client & Google Maps API Server Errors
08:18

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

Create A Firebase Project
01:12

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

Store Route Data To The Cloud Firestore Database (Firebase)
07:41

By the end of this lecture, you'll be able to:

  • Fetch Route Data From Cloud Firestore

  • Display Route Data In A List Format

Show Route List Data On The Vue JS app
12:35

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

Sorting Route Data By Distance & Duration Using Firebase
12:29

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

How To Share Data Between Components Using $EventBus in Vue JS
07:01

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

What is Google Maps Directions API?
06:13

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


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:

  • 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

Show Multiple Route Direction Paths On The Google Maps At Once
10:57

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

Replace Default Markers To Origin/Destination Addresses Using InfoWindow
15:34

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

How To Create Custom Polylines in the Google Maps API
12:01

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

Display Each Route With A Random Color Including Labels, Polyline, etc.
08:18
Download The Completed Project Code
01:21
Time To Test What You've Learned In This Module
15 questions
Feedback Time!
00:15
Requirements
  • This course is designed to be well suited for beginners who know a little bit of HTML, CSS, and JavaScript.
  • 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!
Description

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 1,070+ students with an average rating of 4.9 ⭐️⭐️⭐️⭐️⭐️, my Vue JS 2, and Google Maps API course is 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 JS

  • Vue CLI

  • Components

  • Routes

  • Events

  • Data Binding

  • Nested Components

  • Axios HTTP Client

  • Firebase

  • Semantic UI CSS Framework

  • HTML5 Geolocation API

  • CORS

  • Hoisting

  • Error Handling, and more

Google Maps API

  • Obtain API Key

  • Geocoding API

  • Places Autocomplete API

  • Places API - Nearby Search Request

  • Places API - Place Details Request

  • Map Object

  • Marker Object

  • InfoWindow Object

  • Distance Matrix API

  • Directions API - Directions Service JS Library

  • Directions Renderer

  • Polyline Object

  • Common Google Maps Server Errors, and more

By 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 Lee

Although 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" - Viijayaraghavan


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