Build 3 Location Based Vue JS Web Apps Using Google Maps API

Build 3 Location Based Vue JS Web Apps Using Google Maps API, available at $74.99, has an average rating of 4.9, with 57 lectures, 4 quizzes, based on 257 reviews, and has 33487 subscribers.

You will learn about 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 is ideal for individuals who are Beginner Vue JS Developers curious about Google Maps API. or Beginner JavaScript Developers who want to learn about Google Maps API ecosystem. or Beginner Web Developers who are looking to build location-based apps using Google Maps API. It is particularly useful for Beginner Vue JS Developers curious about Google Maps API. or Beginner JavaScript Developers who want to learn about Google Maps API ecosystem. or Beginner Web Developers who are looking to build location-based apps using Google Maps API.

Enroll now: Build 3 Location Based Vue JS Web Apps Using Google Maps API

Summary

Title: Build 3 Location Based Vue JS Web Apps Using Google Maps API

Price: $74.99

Average Rating: 4.9

Number of Lectures: 57

Number of Quizzes: 4

Number of Published Lectures: 54

Number of Published Quizzes: 3

Number of Curriculum Items: 61

Number of Published Curriculum Objects: 57

Number of Practice Tests: 1

Original Price: $19.99

Quality Status: approved

Status: Live

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

Who Should Attend

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.

Target Audiences

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.

Welcome to the Vue JS(Options API)and Google Maps APIcourse, the only course you need to learn and code to build location-based web applications.

With over 30K+ students with an average ratingof 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 fanof 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 wasvery 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!

Course Curriculum

Chapter 1: Getting Started

Lecture 1: Getting Started With Vue JS

Lecture 2: Obtain Google Maps API Key

Chapter 2: Vue JS 3 [New] – (New Lecture Weekly)

Lecture 1: Create A Vue JS 3 Project Using Vite (new)

Lecture 2: Vue JS 3 Project Structure & Create A Custom Vue Component (new)

Lecture 3: Create Routes Using Vue Router 4 (new)

Chapter 3: Build A Location Detector Vue JS App [HTML5 Geolocation API & Geocoding API]

Lecture 1: What You Will be Building by the End of this Module

Lecture 2: Create a Vue Component and Route

Lecture 3: Build User Location Form Using Semantic-UI

Lecture 4: What is HTML5 Geolocation API?

Lecture 5: Make An HTTP Request To Google Maps Geocoding API

Lecture 6: CORS Error & Solutions When Making HTTP Request to Geocoding API

Lecture 7: Common Errors & Solutions When Making an HTTP Request To Google Maps API

Lecture 8: Handling Vue JS Client and Google Maps API Server Errors

Lecture 9: How To Enable Google Maps Autocomplete API?

Lecture 10: How To Display Users Current Location On The Google Maps?

Lecture 11: Download The Completed Project Code

Lecture 12: Feedback Time!

Chapter 4: Build A CloseBuy App Using Google Maps Places API

Lecture 1: What You Will be Building by the End of this Module

Lecture 2: What is Google Maps Nearby Search Request?

Lecture 3: Create A CloseBuy Vue JS Component

Lecture 4: Make An HTTP Call To Google Maps Nearby Search Request

Lecture 5: Get Nearby Places Data When Using Google Maps Autocomplete API

Lecture 6: Display Places Data on the View

Lecture 7: Show Places Data on the Google Maps View

Lecture 8: Show Tooltip (callout) When A Marker is Clicked

Lecture 9: Show More Information About A Place Using Google Maps Place Details

Lecture 10: Auto Select Markers When List Item is Clicked in Vue JS

Lecture 11: Add Marker Clustering To The Close Buy

Lecture 12: Feedback Time!

Chapter 5: Distance Calculator Vue JS App Using Distance Matrix API & Directions API

Lecture 1: What You Will be Building by the End of this Module

Lecture 2: Create Distance Calculator Vue JS App Components

Lecture 3: Distance Calculator Vue JS App Layout

Lecture 4: Design Origin Destination Form Using Semantic UI CSS Framework in Vue JS

Lecture 5: Enable Google Maps Autocomplete API To Origin & Destination Input Fields

Lecture 6: What is Google Maps Distance Matrix API?

Lecture 7: Make An HTTP Request To Google Maps Distance Matrix API

Lecture 8: Display Vue JS Client & Google Maps API Server Errors

Lecture 9: Create A Firebase Project

Lecture 10: Store Route Data To The Cloud Firestore Database (Firebase)

Lecture 11: Show Route List Data On The Vue JS app

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

Lecture 13: How To Share Data Between Components Using $EventBus in Vue JS

Lecture 14: What is Google Maps Directions API?

Lecture 15: Make A Request To Directions Service & Render The Results On The Google Maps

Lecture 16: Show Multiple Route Direction Paths On The Google Maps At Once

Lecture 17: Replace Default Markers To Origin/Destination Addresses Using InfoWindow

Lecture 18: How To Create Custom Polylines in the Google Maps API

Lecture 19: Display Each Route With A Random Color Including Labels, Polyline, etc.

Lecture 20: Download The Completed Project Code

Lecture 21: Feedback Time!

Chapter 6: Common Google Maps API Errors & Solutions

Lecture 1: FIX Uncaught ReferenceError: google is not defined

Chapter 7: Bonus Lecture

Lecture 1: Up and Running With Vue 3 Project

Lecture 2: Bonus Lecture

Lecture 3: Track Drivers Location Real-Time

Instructors

Raja Tamil | 35,000+ Students
Join 35,000+ happy students from 195 countries and beyond!

Rating Distribution

1 stars: 2 votes

2 stars: 4 votes

3 stars: 25 votes

4 stars: 72 votes

5 stars: 154 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!