Vue.js & Google Maps API for Beginners

Build 3 Real-World Location-Based Apps Like a Pro!


JOIN 1,124+ others learning to build Location-Based Web Apps with Vue.js and Google Maps API

What You Will 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

Who is this 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.

πŸ‘‰ 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!

πŸ‘‰ 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!

What's Covered

πŸ”₯Vue CLI

πŸ”₯ Components

πŸ”₯ Routes

πŸ”₯ Events

πŸ”₯ Data Binding

πŸ”₯ Nested Components

πŸ”₯ Axios HTTP Client

πŸ”₯ Firebase

πŸ”₯ Semantic UI CSS Framework

πŸ”₯ HTML5 Geolocation API


πŸ”₯ Hoisting

πŸ”₯ Error Handling, and more

πŸ”₯ 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


JOIN 1,124+ others learning to build Location-Based Web Apps with Vue.js and Google Maps API

Raja Tamil - Your Instructor

Raja Tamil is a self-taught Web and iOS Developer from Ontario, Canada.

Raja has almost a decade of experience working with various technologies. He has contributed to’s own publications and is a best selling instructor with Udemy.


Module 1
Build A Location Detector Vue JS App

1 What You'll Be Building By The End Of This Module

2 Getting Started With Vue JS

3 Obtain Google Maps API Key

4 Create a Vue Component and Route

5 Build User Location Form Using Semantic UI

6 What is HTML5 Geolocation API?

7 Make An HTTP Request To Google Maps Geocoding API

8 Common Errors & Solutions When Making an HTTP Request To Google Maps API

9 Handling Vue JS Client and Google Maps API Server Errors

10 How To Enable Google Maps Autocomplete API

11 How To Display User's Current Location On The Google Maps

12 Download The Complete Project Code

13 Quiz #1: Time To Test What You've Learned In This Module

Module 2
Build A CloseBuy App Using Google Maps Places API

14 What You'll Be Building By The End Of This Module

15 What Is Google Maps Nearby Search Request?

16 Create A CloseBuy Vue JS Component

17 Make An HTTP Call To Google Maps Nearby Search Request

18 Get Nearby Places Data When Using Google Maps Autocomplete API

19 Display Places Data On The View

20 Show Places Data On The Google Maps View

21 Show Tooltip (Callout) When A Marker Is Clicked

22 Show More Information About A Place Using Google Maps Place Details

23 Auto Select Markers When List Item Is Clicked In Vue JS

24 Quiz #2: Time To Test What You've Learned In This Module

Module 3
Distance Calculator Vue JS App Using Distance Matrix API & Directions API

25 What You'll Be Building By The End Of This Module

26 Create Distance Calculator Vue JS App Components

27 Distance Calculator Vue JS App Layout

28 Design Origin Destination Form Using Semantic UI CSS Framework In Vue JS

29 Enable Google Maps Autocomplete API To Origin & Destination Input Fields

30 What Is Google Maps Distance Matrix API?

31 Make An HTTP Request To Google Maps Distance Matrix API

32 Display Vue JS Client & Google Maps API Server Errors

33 Create A Firebase Project

34 Store Route Data To The Cloud Firestore Database (Firebase)

35 Show Route List Data On The Vue JS App

36 Sorting Route Data By Distance & Duration Using Firebase

37 How To Share Data Between Components Using $EventBus In Vue JS

38 What Is Google Maps Directions API?

39 Make A Request To Directions Service & Render The Results On The Google Map

40 Show Multiple Route Direction Paths On The Google Maps At Once

41 Replace Default Markers To Origin/Destination Addresses Using InfoWindows

42 How To Create Custom Polylines In The Google Maps API

43 Display Each Route With A Random Color Including Labels, Polylines, Etc

44 Quiz #3: Time To Test What You've Learned In This Module

Premium Course   Best Seller
Vue.js & Google Maps API for Beginners

πŸ‘‰ Access to all 3 Modules / 40+ Lectures including HD Videos, Documents and Quizzes β€” see above for a full listing of topics

πŸ‘‰ Stream Video files from any device

πŸ‘‰ Includes 3 Real-Word Location-Based Applications from Start to Finish with STEP by STEP instructions

πŸ‘‰ Detecting User Location, Getting Nearby Places such as restaurants, Calculating Travel Distance between one or more locations, etc

πŸ‘‰ Best Practices working with Vue JS and Google Maps API

πŸ‘‰ All Source Code - Download for All 3 Completed Project files

πŸ‘‰ Unlimited Updates + Never Expires

πŸ‘‰ Exclusive access to the Vue JS & Google Maps API Private Facebook Group where you can ask for help and chat with other learners

GET THE COURSE | $$15.99 $$199.00
Note: Prices are in USD!

JOIN 1,124+ others who've already enrolled in this course


People Said
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

Once it’s purchased, it’s available to you forever without any additional charge! Any updates are also absolutely FREE!


Log into your account, or create an account with the same email you used to sign up for the course.


Great question! The good news is that Google offers FREE $300 credit per month at the time of writing this, which is more than enough to complete this course. However, you will need to provide your credit card information in order to get the API working.


I want to ensure you get great value and that you are happy with my course! If you are not completely satisfied with the course, please send an email to with a copy of your welcome email and I will refund you. Please let me know in the email what I can improve on so that I can make the necessary changes to enhance the learning experience.


Sure do! Send me an email at with the course name and some proof that you are a student and I'll send you a discount code.


Absolutely! In your course dashboard, you can download an official certificate of completion that can be used to be reimbursed by your employer or land that dream job you are applying for.


Sure - send me an Email at or Tweet me at @hirajatamil

You've reached the end of this content segment! Have a question which is not in here...shoot me an email at

JOIN 1,124+ others learning to build Location-Based Web Apps with Vue.js and Google Maps API