Ionic Vue - Capacitor Google Map Plugin

Подписаться 7 тыс.

Просмотров 2 тыс.

50% 1

Ionic Vue - Capacitor Google Map Plugin
#vue #googlemaps #ionic
In this video tutorial, I'll be showing you how to use the Capacitor Google Map plugin in Vue.js. I noticed that there was no Vue.js example in the documentation, so I created my own example with the help of some folks in Discord. I also have a full blog post that walks you through every page, code, variable, function, and template. In this video, I'll be walking you through the example and making some changes to get it to work appropriately in a web view. I'll also be discussing some of the challenges I faced and how I resolved them.
Check out the complete source code in my GitHub repo.
/// Sign Up For Our Newsletter buff.ly/3lAk2jL
💥 Links
--------------------------
Ionic Visual Studio Code Plugin - marketplace.vi...
Ionic Vue - ionicframework...
Capacitor - capacitorjs.com/
Google Maps Plugin - capacitorjs.co...
SOURCE CODE - github.com/aar...
#ionicframework #vuejs

Опубликовано:

5 окт 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 11

@tclark Год назад

Thank you for making Vue a first class citizen! Great tutorial!

@WBSummerlin 11 месяцев назад

On android the google map is rendered underneath everything. How the heck do you make that work?

@vivatraclub Год назад

thanks to your video and website was able to load on the web but not on mobile, I think is 'cause I'm passing the google maps key directly on the code, should I setup the request info settings on iOS?

@AaronSaundersCI Год назад

The code linked in the video doesn’t work for you?

@vivatraclub Год назад

@@AaronSaundersCI I was able to make it run for web app but was trying to test it on my iPhone and appears gray only, I think the issue is 'cause I'm using MacBook Pro M1 read it do not allow to test google maps capacitor plugin, anyway will test tomorrow with an iMac and downgrade my iOS. if you have any suggestion for the gray view let me know, I think I should added on load method maybe? (nIonViewDidEnte)

@The100ra Год назад

why can't you test it on M1? @@vivatraclub

@envygamer 7 месяцев назад

The reason the web view is broken is that you are missing `@ionic/pwa-elements` It's pretty simple Step 1: install `@ionic/pwa-elements` you might also need `jsdom and terser` if you have vite scaffolding. Step2: `import { defineCustomElements } from "@ionic/pwa-elements/loader";` in your main.js Step 3: Add defineCustomElements(window); after you mount the app when router is ready like this `router.isReady().then(() => { app.mount("#app"); defineCustomElements(window); }); ` And Web should work geolocation Camera etc will need this setup

@AaronSaundersCI 7 месяцев назад

U don’t need pwa-elements for web view…