4.82 out of 5
4.82
22 reviews on Udemy

Vue.js + Google Maps API for Beginners

Build Location-based Apps using Google Maps API with the Popular Front-end Framework Vue.js
Instructor:
Raja Tamil
994 students enrolled
English [Auto-generated]
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

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.

Getting Started

1
Getting Started With Vue.js

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

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


2
Obtain Google Maps API Key

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


Detect User's Current Location

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

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

2
Create a Vue Component and Route

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

  • Create a Brand New Vue Component

  • Attach a Route to that Component

3
Build User Location Form Using Semantic-UI

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.

4
HTML5 Geolocation API

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


5
Make An HTTP Request To Google's Geocoding API

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

6
Common Errors & Solutions When Making an HTTP Request To Google Maps API
7
Handling Client and Server Errors

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

8
Enable Autocomplete API

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


9
Show User's Current Location On The Google Map

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




Build A CloseBuy App Using Places API

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

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

2
What is Nearby Search Library?

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

3
Create A CloseBuy Component

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


4
Make An HTTP Request To Nearby Search

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



5
Get Nearby Places Data When Using Autocomplete
6
Display Places Data on the View

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

7
Show Places Data on the Maps View

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

8
Show Tooltip (callout) on the Marker

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

9
Show More Information About A Place

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

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

10
Auto Select Markers When List Item is Clicked

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.

You can view and review the lecture materials indefinitely, like an on-demand channel.
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!
4.8
4.8 out of 5
22 Ratings

Detailed Rating

Stars 5
16
Stars 4
6
Stars 3
0
Stars 2
0
Stars 1
0
e5054f4c7409191029e831bcc983aa6f
30-Day Money-Back Guarantee

Includes

2 hours on-demand video
2 articles
Full lifetime access
Access on mobile and TV
Certificate of Completion