Populating a Google Map with Vue and Laravel

Populating a Google Map with Vue and Laravel
In this 25 minute video, I'll show you how to create and embed a Google Map with Vue, then populate that same map with pins and pop-up info windows using data pulled in from a Laravel API.

In this 25 minute video, I’ll show you how to create and embed a Google Map with Vue, then populate that same map with pins and pop-up info windows using data pulled in from a Laravel API.

Previous video on getting started with Vue and Google Maps: https://www.youtube.com/watch?v=KARBEHUyooM

0:00 - Introduction
0:45 - Creating a Laravel API for our restaurants
5:55 - Setting up the front-end view and JavaScript
9:50 - Adding Vue Google Maps plugin
12:05 - Populating the map with pins
16:35 - Adding pop-up windows to the pins

Join my newsletter for weekly tips on Laravel + Docker: https://aschmelyun.substack.com

You’ll learn how to:

  • Create a basic single-endpoint Laravel API
  • Seed a MySQL database with testing data
  • Use Vue and vue2-google-maps to embed a Google Map
  • Populate the Google Map with pins using location data

Suggest:

Vue js Tutorial Zero to Hero || Brief Overview about Vue.js || Learn VueJS 2023 || JS Framework

Learn GraphQL with Laravel and Vue.js - Full Tutorial

Learn Vue.js from scratch 2018

Is Vue.js 3.0 Breaking Vue? Vue 3.0 Preview!

Laravel Tutorial - Abusing Laravel

Vue.js Tutorial: Zero to Sixty