Ionic VueJS - Part 3: Create Vue Google Maps Component and Deploy to Mobile with Ionic Capacitor

Ionic VueJS - Create A Vue3 Google Maps Component and Deploy to Mobile with Ionic Framework & Capacitor: Part 3

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.

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

#ionic #vuejs #googlemaps

💥 VIDEO SERIES 💥

💥 CHAPTERS 💥
00:00 intro
00:47 start coding - add a callback for when map is loaded
02:46 take advantage of Google services loaded by the map component
04:17 use the google geocoded service to get LatLng from an address
14:00 take the address that we found and make it a marker on the map
16:53 make the map adjust its bounds based on marker to show all markers in view
19:57 testing the map bounds update as markers are added
20:00 wrap up

💥 DOCUMENTATION LINKS 💥

💥 SUPPORT THIS CONTENT 💥

💥 BLOG 💥

💥 VUE JS PLAYLIST 💥

💥 NEWSLETTER 💥

#ionic #vuejs #tutorial #javascript #ionicframework #vue #compositionapi #capacitor #vuejs #firebase #vue3 #vuejs3 #googlemaps #googleservices #mobileapps #geocoding

-~-~~-~~~-~~-~-
Please watch: "Getting Started With Appwrite, Vue JS Ionic Framework & Capacitor"
-~-~~-~~~-~~-~-

[MoritzMurauer]

Is there any possibility to find the code for this? Coud only find lesson 1 on dev.to unfortunately. Great series anyways Aaron, exactly what I was looking for!

[CarlosMartinezTech]

I would like to see a video of how to handle the ionic components methods in Vue 3 as example setFocus() on an ion-searchbar etc. Thanks!

[luiseberrojasduque]

This code presents an error and does not allow the map to be displayed:

watch(
() => props.markers,
() => {
loadMapMarkers();
}
);

The error in console:

Uncaught (in promise) ReferenceError: watch is not defined