Vue JS + Google Maps API: Ultimate Beginner’s Friendly Guide

Build 3 Professional Real World Location Based Web Apps Using Vue JS & Google Maps API Like A Pro
(249) Ratings
32,371 students
Created by Raja Tamil

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.
This course includes:
5 total hours on-demand video
13 articles
4 downloadable resources
54 lessons
Full lifetime access
Access on mobile and TV
Certificate of completion

Course content


  • 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!


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.

With over 30K+ students with an average rating of 4.6, my Vue JS, and Google Maps API course is one of the Highest-rated 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 JS

  • Vue CLI

  • Options API (which works either Vue JS 2 or Vue JS 3 Project, no problem )

  • 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 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. 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 learned 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.
Free Udemy Coupons
Register New Account