Vue Js + Google Maps Api: Build Location Based Web Apps Fast

Learn and Master Google Maps API by Building 3 Professional, Real-World Vue JS Location-Based Apps Like a Pro!

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.
Requirements
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!
Description
Welcome to the Vue JS 2 and Google Maps API class, the only course you need to learn and code to build location-based web applications. Over 4,586+ students with an average rating of 4.1, my Vue JS 2, and Google Maps API course was one of the Best Selling 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 JSVue CLIComponentsRoutesEventsData BindingNested ComponentsAxios HTTP ClientFirebaseSemantic UI CSS FrameworkHTML5 Geolocation APICORSHoistingError Handling, and moreGoogle Maps APIObtain API KeyGeocoding APIPlaces Autocomplete APIPlaces API - Nearby Search RequestPlaces API - Place Details RequestMap ObjectMarker ObjectInfoWindow ObjectDistance Matrix APIDirections API - Directions Service JS LibraryDirections RendererPolyline ObjectCommon Google Maps Server Errors, and moreBy the end of this course, you will be fluently coding in Vue JS 2 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 LeeAlthough 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" - ViijayaraghavanREMEMBER… 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!

Overview

Section 1: Getting Started

Lecture 1 Getting Started With Vue JS

Lecture 2 Obtain Google Maps API Key

Section 2: Build A Location Detector Vue JS App [HTML5 Geolocation API & Geocoding API]

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

Lecture 4 Create a Vue Component and Route

Lecture 5 Build User Location Form Using Semantic-UI

Lecture 6 What is HTML5 Geolocation API?

Lecture 7 Make An HTTP Request To Google Maps Geocoding API

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

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

Lecture 10 Handling Vue JS Client and Google Maps API Server Errors

Lecture 11 How To Enable Google Maps Autocomplete API?

Lecture 12 How To Display User's Current Location On The Google Maps?

Lecture 13 Download The Completed Project Code

Lecture 14 Feedback Time!

Section 3: Build A CloseBuy App Using Google Maps Places API

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

Lecture 16 What is Google Maps Nearby Search Request?

Lecture 17 Create A CloseBuy Vue JS Component

Lecture 18 Make An HTTP Call To Google Maps Nearby Search Request

Lecture 19 Get Nearby Places Data When Using Google Maps Autocomplete API

Lecture 20 Display Places Data on the View

Lecture 21 Show Places Data on the Google Maps View

Lecture 22 Show Tooltip (callout) When A Marker is Clicked

Lecture 23 Show More Information About A Place Using Google Maps Place Details

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

Lecture 25 Add Marker Clustering To The Close Buy

Lecture 26 Feedback Time!

Section 4: Distance Calculator Vue JS App Using Distance Matrix API & Directions API

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

Lecture 28 Create Distance Calculator Vue JS App Components

Lecture 29 Distance Calculator Vue JS App Layout

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

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

Lecture 32 What is Google Maps Distance Matrix API?

Lecture 33 Make An HTTP Request To Google Maps Distance Matrix API

Lecture 34 Display Vue JS Client & Google Maps API Server Errors

Lecture 35 Create A Firebase Project

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

Lecture 37 Show Route List Data On The Vue JS app

Lecture 38 Sorting Route Data By Distance & Duration Using Firebase

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

Lecture 40 What is Google Maps Directions API?

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

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

Lecture 43 Replace Default Markers To Origin/Destination Addresses Using InfoWindow

Lecture 44 How To Create Custom Polylines in the Google Maps API

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

Lecture 46 Download The Completed Project Code

Lecture 47 Feedback Time!

Section 5: Bonus Lecture

Lecture 48 Bonus Lecture

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.