Ionic 6 Google Maps 🔥 - New Capacitor Official Plugin | Testing in Android & iOS

Hello Friends, Welcome Back to @CodingTechnyks. In this video, we are going to implement a New Capacitor Official Plugin "Google Maps" using​ #ionic #angular for #pwa, #android & #ios.

Google maps announcement link

► Udemy Course on Ionic Coupon Code

► Features:-
Setup Google Maps API Key with Billing Account
Use of Native Google Maps
Running in Android & iOS

► Social Media

Thanks for watching!
Kindly Like + Subscribe for such Interesting Videos.

[evansbusobozi]

Hello, thanks for the tutorial. I have a problem with my ionic app although it does not contain google maps, when I run it on a virtual ios device it works successfully. But when I run it on a real ios device it stops at the splash screen and doesn't display any error. What could be the problem?

[kcwebdev]

hi coding tech, ur videos are helpful, can u suggest how can we show route between two markers (destination and current) in this @capacitor/google-maps and track the current location.

[DiegoHerreratuc]

i have a map into a page about a modalcontroller, i dont know what is the problem. the maps is not displayed. but is displayed in the page that is not modal. please help

[LucaStasio]

on Android real device app crash at start. Even with other app of my own, i faced issues with this new Capacitor Google Maps plugin. It fails miserably, especially on Android... as an example, the fullscreen fails as bullshit.

[azharsayyad]

Hello, I'm facing issues with after capturing image. It's throwing the error(open failed: EACCES (permission denied))

[phpgyn]

Polylines don't work. It still has a lot to evolve to be usual. I'm switching to flutter, I think it's the end of ionic.

[karitoberlanga]

Hello, sorry I have a problem when running the app on an Android cell phone, since the app closes when trying to load the map, but only on the cell phone, it works fine in the browser, any idea what's going on?

[brandon]

sadly didnt work for me. using the last version of the plugin, i coulnt be able to solve te transparency problem on android

[issaalkamaly]

This plugin has a lot of bugs. SetCamera and setMapType doesn’t work .

[aprikrnwn]

hello, nice for tutorial, . how to change custom icon marker, thanks

[shufflewtf]

Hello thanks for the tutorial., how to make a custom style on the map with capacitor official plugin ?

[udhayachandran]

hi i am facing an error after installing capacitor google map plugin while building that in android stujdio it did'nt build. it says > Task FAILED
[Fatal Error] Content is not allowed in prolog.
[Fatal Error] Content is not allowed in prolog.
[Fatal Error] Content is not allowed in prolog.
[Fatal Error] Content is not allowed in prolog.

Execution failed for task
> Could not resolve all files for configuration
> Could not resolve
Required by:
project :capacitor-google-maps >
> Could not resolve
> Content is not allowed in prolog.
> Could not resolve
> Content is not allowed in prolog.
> Could not resolve
Required by:
project :capacitor-google-maps >
> Could not resolve
> Content is not allowed in prolog.
> Could not resolve
> Content is not allowed in prolog.

[francolondra]

Hello, this problem happened to you, when you move and open another page or other tabs or some modals many times?

E/Capacitor/Plugin: Unhandled Error: null.

at
at
at Method)
at
at
at Source:8)
at
at
at
at
D/Capacitor: Sending plugin error: {"save":false, "callbackId":"99599765", "pluginId":"CapacitorGoogleMaps", "methodName":"dispatchMapEvent", "success":false, "error":{"message":"Unhandled Error: null.", "code":"0"}}
Notifying listeners for event isMapInFocus
V/Capacitor/Plugin: To native (Capacitor plugin): callbackId: 99599768, pluginId: CapacitorGoogleMaps, methodName: dispatchMapEvent
V/Capacitor: callback: 99599768, pluginId: CapacitorGoogleMaps, methodName: dispatchMapEvent, methodData: {"id":"map", "focus":false}
V/Capacitor/Plugin: To native (Capacitor plugin): callbackId: 99599769, pluginId: CapacitorGoogleMaps, methodName: dispatchMapEvent
V/Capacitor: callback: 99599769, pluginId: CapacitorGoogleMaps, methodName: dispatchMapEvent, methodData: {"id":"map", "focus":false}

And did you see this amount of logs in the chrome console?

(this is a part, I saw more than 3000 logs and these logs keep increasing the more you move and change pages or tabs, they don't stop when changing pages)

xVM3:243 native (#99599732)
VM3:217 result (#99599116)
VM3:243 native (#99599733)
VM3:217 result (#99599116)
VM3:243 native (#99599734)
VM3:217 result (#99599732)
Unhandled Promise rejection: Unhandled Error: null. ; Zone: <root> ; Task: Promise.then ; Value: Error: Unhandled Error: null.
at returnResult (VM3:741:32)
at win.androidBridge.onmessage (VM3:716:21) Error: Unhandled Error: null.

[arbelaezdiego]

Did anybody make it work in ios? white screen in the home page, and the console log is:


2022-09-27 16:52:09.124057-0500 App[10315:2518164] KeyboardPlugin: resize mode - native
⚡ Loading app at capacitor://localhost...
⚡ WebView loaded
⚡ [log] - Angular is running in development mode. Call enableProdMode() to enable production mode.
⚡ To Native -> CapacitorGoogleMaps addListener 35715879
⚡ To Native -> CapacitorGoogleMaps create 35715880
⚡ TO JS undefined
⚡ [log] - mapa {"element":{}, "id":"my-map"}
⚡ To Native -> App addListener 35715881