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.

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

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.

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

DC based software agency utilizing #Javascript, #Typescript, #HTML5, #Ionicframework, #NodeJS, #Firebase to build web & mobile solutions. https://buff.ly/300Zru

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store