Courses BooksBlog
SoftAuthor

Vue.js & Google Maps API for Beginners


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



START LEARNING NOW 🚀

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

🔥 CORS

🔥 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

BUY THE COURSE!

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

- 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 Medium.com’s own publications and is a best selling instructor with Udemy.

Curriculum



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


DAYS | HOURS | MINUTES | SECONDS

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
⭐️⭐️⭐️⭐️⭐️
FAQ
1. HOW LONG DO I HAVE ACCESS TO THE COURSE?

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

2. I HAVE LOST, DELETED OR NEVER GOT MY WELCOME EMAIL! WHAT DO I DO?

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

3. IS GOOGLE MAPS API FREE?

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.

4. WHAT IF I'M NOT DELIGHTED?

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 info@softauthor.com 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.

5. DO YOU OFFER A STUDENT DISCOUNT?

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

6. DO YOU PROVIDE A CERTIFICATE OF COMPLETION?

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.

7. I HAVE ANOTHER QUESTION?

Sure - send me an Email at info@softauthor.com 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 info@softauthor.com
GET STARTED LEARNING TODAY!

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


Hey, Like what you're reading?

🔥 1,750+ students already enrolled!
4.5 ⭐️⭐️⭐️⭐️⭐️ (86+ ratings) BEST SELLER