Google Maps API & Vue JS: Build 3 Location-Based Web Apps

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

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

• Create a Brand New Vue Component

• Attach a Route to that Component

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.

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

  
  

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

Master three professional methods to fix CORS errors permanently, whether you are building a simple frontend app or a full-stack system.

• Client-Side Fix: Use a third-party proxy URL to bypass browser blocks instantly during development.

• Server-Side Strategy: Move requests to the backend with Node.js to eliminate CORS restrictions entirely.

• Full-Stack Solution: Learn to configure custom headers to allow secure communication between your client and server apps.

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

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

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

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

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

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

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

  
  

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

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

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

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

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

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.

In this module, we’re going to be learning about Google Maps Distance Matrix API and the powerful Google Maps Directions API as well as a little bit of Firebase by building a beautiful Distance Calculator App.

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

• Understand How To Split A Vue.js App Into Multiple Components

• Make An HTTP Request To Google Maps Distance Matrix API

• Store And Fetch Route Data Using Cloud Firestore Database (Firebase)

• Share Route Data Between Vue Components Using $EventBus

• Make An Asynchronous Request To Google Maps Directions Service

• Display Directions Path For A Single Route On The Map

• Show Directions Path For All The Routes On The Map At Once

• Create A Custom Polyline On The Google Map

• Assign A Random Color To Each Route

  
  

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

• Create A Route Form, Route List And DirectionsMapView Vue Components

• Create A Page-Based Vue Component And Route For It

• Add Child Vue Components To The Parent Component

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

• Build A Layout For A Distance Calculator App

• Place The Map View Behind The Route Form and Route List UI Elements

  
  

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

• Install Semantic UI CSS Framework Via NPM To The Vue Project

• Build An Origin And Destination Input Form Using Semantic UI CSS Framework

  
  

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

• Add Google Places Autocomplete To The Origin And Destination Input Fields

• Add Place Changed Event To The Autocomplete Object To Get Selected Addresses

• Refactor The Autocomplete Code To Avoid Repetition

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

• Know What Google Maps Distance Matrix API Is

• Understand Required Request Route And Query Parameters To Make An HTTP Call

• Understand The Structure Of The Output Response Data

  
  

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

• Install Axios HTTP Client Via NPM

• Making An HTTP Call To Google Maps Distance Matrix API

• Get Travel Distance And Duration Data From The Response Object

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

• Display Client And Server Errors When Making An HTTP Request To Google Maps Distance Matrix API

• Show And Hide The Spinner When Needed

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

• Create A Firebase Project

• Install Firebase To Your Vue.js Project

• Add Firebase Configuration Code To The Vue Project

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

• Install Firebase On The Vue Project

• Initialize Firebase

• Understand How The Cloud Firestore Data Structure Works

• Store Route Data To The Cloud Firestore

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

• Fetch Route Data From Cloud Firestore

• Display Route Data In A List Format

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

• Sort Route Data Based On Travel Distance And Duration

• Create A Single Function And HTML Element For All Four Sorting Scenarios Such As Long Or Short Distance And Fast Or Slow Duration

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

• Share Data Between Vue Components Using EventBus

• Send Route Data To A Vue Component Using $emit()

• Receive Route Data From A Vue Component Using $on

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

• Know What Google Maps Directions API Is

• Understand The Difference Between Directions API Vs Directions Service

• Know The Required Request Route And Query Parameters To Make A Call To Directions Service

• Understand What The Output Response Object Will Look Like

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

• Create A Google Maps Map Object

• Send A Request To Google Maps Directions Service To Get Directions Data

• Render The Directions Data In The Form Of A Polyline Path On The Map Using DirectionsRenderer

  
  

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

• Show All The Route Data On The Map In The Form Of Polyline Paths

• Loop Through The Route Data

• Render The Directions Data In The Form of Polyline Paths On The Map Using DirectionsRenderer On Each Iteration

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

• Remove Default Origin And Destination Markers In The Directions Renderer

• Add Origin And Destination Addresses At The Start And End Of The Polyline Path

• Create Multiple InfoWindows For Origin Address, Destination Address And Also For The Travel Distance & Duration In The Middle Of The Polyline

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

• Create A Custom Polyline Object

• Create An Overlay Polyline Path That Will Connect The Origin Address To The Starting Directions Path As Well As From The Ending Directions Path To The Destination Address

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

• Generate A Function That Will Create A Random Hex Color

• Save A Random Color To Each Route Object

• Set The Random Color To The InfoWindow Labels As A Background Color

• Change The Directions Path Polyline Color

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

• Install Node.js & NPM

• Create A Vue JS 3 Project Using Vite
  

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

• Understand how the Vue JS 3 project is structured

• Create, Import, and Render A Custom Vue Component

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

1. Install Vue Router 4 inside a Vue.js 3 project.

2. Import and use the router in the Main.js file.

3. Declare a route view placeholder element in App.vue.

4. Create a router object.

5. Create routes for Home and Product components.

In this lecture, you’ll learn how to design a simple yet professional-looking sign-up form using Vue 3, Semantic UI, and CSS Flexbox.