Vue Google Maps Example Project - Maps, Markers, GeoCoder API, Map Resizing, Adding Markers, Adding InfoWindow

The last of the 3 part video series is available now. Ionic Framework Vue 3 and Google Maps Example Project - Maps, Markers, GeoCoder API, Map Resizing, Adding Markers, Adding InfoWindow

Jump To Videos

PART ONE: https://youtu.be/HS2wdAtCYKg
PART TWO: https://youtu.be/XAaDe0-59EQ
PART THREE: https://youtu.be/XS-lIBBIJSc

Maps are a critical part of many web and mobile solutions and the rich set of functionality provided by Google Maps make it an obvious choice in many situations. When I was looking for a Vue3 compatible solution I really didn't find anything I loved so I decided to see how to roll my own.

Part One - Getting the Map on The Page

1) In this video, we create a vue 3 google map component using the newer SFC component with setup. We will and marker, infoboxes, event handlers, and access to related services as we work through the project.
We also end the video by deploying the build to IOS and Android devices to showcase Capacitor

Part Two - Markers and InfoWindow

2) In this video, we create a vue 3 google map component using the newer SFC component with setup. We will add infoboxes, event handlers we created in part one. We will also demonstrate how to dynamically add new markers to the map and have the map update to reflect the changes.

Part Three - GeoCoder & Map Bounds

3) In this video, we use the google geocoder service to allow the user to enter an address, find the lat, lng, and then add the marker to the map. For a great user experience, we add functionality to automatically recalculate the map bounds so it adjusts to show all markers whenever a new marker is added