Development
Web Development
Vue JS
Vue.js + Google Maps API for Beginners
4.8 (24 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,010 students enrolled

Vue.js + Google Maps API for Beginners

Build Location-based Apps using Google Maps API with the Popular Front-end Framework Vue.js
Bestseller
4.8 (24 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,010 students enrolled
Created by Raja Tamil
Last updated 5/2020
English
English [Auto-generated]
Preview this course
Vue.js + Google Maps API for Beginners
Current price: $72.99 Original price: $104.99 Discount: 30% off
5 hours left at this price!
Buy now
30-Day Money-Back Guarantee
This course includes
  • 2 hours on-demand video
  • 2 articles
  • 2 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
  • Build a User Location Detector App Using HTML5 Geolocation & Geocoding APIs
  • Create a Close Buy App Using Places API - Nearby Search, Place Details
  • Understand the basics of the VueJs - Components, Routes, Events
  • Learn How Geocoding API, Places API Work
  • Able to Design professional UI Quickly Using Semantic UI CSS Framework
Course content
Expand all 21 lectures 02:01:26
+ – 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
+ – Detect User's Current Location
9 lectures 51:26

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:10

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


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's Geocoding API
06:11
Common Errors & Solutions When Making an HTTP Request To Google Maps API
00:47

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 Client and 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


Enable 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




Show User's Current Location On The Google Map
10:04
+ – Build A CloseBuy App Using Places API
10 lectures 58:10

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 Nearby Search Library?
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 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 Request To Nearby Search
07:03
Get Nearby Places Data When Using Autocomplete
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 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) on the Marker
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
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
06:08
Requirements
  • Be able to understand the basic concepts of HTML, CSS and JavaScript
  • I'll walk you through, step-by-step how to get up and running with VueJs / Google Maps API / Semantic UI CSS framework
Description

Welcome to Vue.js + Google Maps API for Beginners course.


Over 900+ students have already taken this course to enhance their Vue.js and Google Maps API skills to the next level with an average rating of 4.9 ⭐️⭐️⭐️⭐️⭐️


In this course, I'll take you step-by-step through engaging and fun video tutorials and teach you how to build a couple of location-based apps.

Our Vue.js & Google Maps API for Beginners course teaches you how to get started with Vue.js and Google Maps API to build location-based apps faster with a little bit of HTML and JavaScript knowledge.


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.


Don't just take my word for it, see what some of my students had to say about this course:

"This course is very helpful to me. Thanks and hope you will make many sources helpful like this." - Long Lee

"This course guides me too easy manner and each section has very clear instructions. I would strongly recommend by 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

"Great course!" - James Tan

"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


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:

  • If you are an absolute beginner to Vue.js but know a little bit of HTML and JavaScript, then take this course.

  • If you are a Front-end or JavaScript Developer, then take this course to get up to speed quickly with building location-based apps using Google Maps API.

  • If you are a Vue.js developer and curious to know how the Google Maps Platform works, then this course will be worth taking.


Who this course is for:
  • Beginner level Web / Front-end Developers that want to expand their skill to build Location based VueJs apps
  • VueJs developers that are curious to learn about how Google Maps Platform works