How to use the Capacitor Google Maps Plugin with Ionic

[@pedropato3535]

Somehow it didn't work for me, and I've been trying for the last 4 days. It always ends up with error on "mapRef", "map:" (GoogleMap) and on mapsKey. I'm completely clueless on what's wrong.

[@FrederikHeld]

Hey Simon, it would really help if you could mention the version of all packages that you are using in your videos. I'm trying the exact steps you describe today (06/2024) and the map won't show up on iOS (it works on Android and Web though). I'm on 6.0.0 of everything (@capacitor/google-maps is 6.0.0-rc.0 because - as opposed to your claim - they did not officially update the plugin in time for the Capacitor update).

[@jagatbandhu2601]

In Android the map is not showing now

[@CerebralDad]

do you know how to get the fitbounds feature to work? to auto zoom on a bunch of markers?

[@aprikrnwn]

hello, nice for tutorial,. how to change custom icon marker, i use property iconUrl but not working.

[@geronimovelasco]

Nice tutorial Simon, Thanks!

[@galaxies_dev]

Glad it was helpful!

[@ericamarchi2699]

great tutorial! How can I prevent on mobile the popup opening when click on marker? I wanna use only the bottom sheet for ios, android and web!

[@mayconnwillian8617]

I saw that you put the map creation inside an "ionViewDidEnter", that means the map will be created all the times you get in that screen?

[@galaxies_dev]

Yeah probably better to add it to ngAfterViewInit!

[@curious_adidac]

Again awesome video! Simon

[@ChristianRVN]

Hi Simon, thanks for this! Just one question, how can I set the marker and get the coordinates when the user click on the map?

[@rajandhinoja1976]

Hi Simon, I have used capacitor map inside the modal as a component. I tried the ion-content background to none it is still not working in the android real device. It is working on the web. Please help me out. I am using M1 for development.

[@FANTHERFUCK]

I have the same problem, do you solved it?

[@rajandhinoja1976]

@@FANTHERFUCK Not yet. I switched to old cordova plugin instead of capacitor.

[@alantlx]

@@rajandhinoja1976 Do you have an example?, I have the same problem

[@arbelaezdiego]

@@rajandhinoja1976 do you have a video about cordova plugin working in ios and android? this capacitor plugin is not working in ios. Thanks!

[@FANTHERFUCK]

@@rajandhinoja1976 nice, I used Mapbox insted the google maps and my problem is fixed.

[@AbhiLM]

Hi Simon, is it not showing in web view? like if i use the size more than 800width then will it not work? and if yes then what is the solution?

[@henriquev_6456]

Hey can you answer pls, how can i use a custom marker for this method?

[@MobilitySolUY]

Hi Simon! Thanks for the videos, btw, i want to add polygons on my map, but im not being able to do it. I know there is a function addPolygons but idk how to pass my coordinates to generete it. Any solution?? Thanks!

[@mmarcoscolombo]

Hi Simmon! Do you know other plugin to show maps than google maps? Thanks!

[@alberbm1609]

you can integrate place autocomplete with maps

[@rex7200]

Hi, Simons I am trying to change the map type. But map.setMapType(MapType.Satellite) is not working in web or android.

[@JRLawhorne-y3u]

Thanks Simon! How would I "DRY" up the key use by dynamically putting it in the Android manifest file from my environment?

[@brandon400]

could you do it? bro

[@pratap4u436]

In my case getcurrentlocation is taking long time 45sec Or more in ios ... Any suggestion?... Also tried watch position but it's behaviour is random sometime fast sometime slow

[@dietmarscheiblhofer5980]

Hey Simon! I just followed your description, but get the error: Error: node_modules/@capacitor/google-maps/dist/typings/definitions.d.ts:43:34 - error TS2503: Cannot find namespace 'google'. Any idea why the google namespace cannot be found. Thx Didi

[@corentinesnault4182]

I got the exact same error and i can't find any solution either, someone pls can help ?

[@dietmarscheiblhofer5980]

@@corentinesnault4182 Hey, I fixed it by switching to angular google-maps.

[@shinez6241]

Hi Simon, Thanks for the nice tutorial. One question , how we show the route map from multiple gps coordinates?

[@galaxies_dev]

I think that's not (yet) possible with the Capacitor plugin!

[@jacoboarcemendizabal7036]

Thanks so much, I have a question, How make geofencing in ionic 5, with capacitorJS or cordova?

[@galaxies_dev]

Haven't implemented that yet, sorry Jacobo!

[@pnvsrinivas]

HI sir, I saw your both videos of "How to pass data b/w pages". But could you please do a small video on "How to encode the data in the URL". I mean the query parameters that we pass while navigating to other page will be visible/readable by users on the address bar, instead can we encode the data and decode it from app.module itself ? (we tried HttpParameterCodec but it is at each page, instead can we do at app.module level )

[@CyberiaSoft]

It doesn't work on android, if I try it with Ionic LAB it works without problems, but when I run it on ANDROID the screen remains black, do you know what the problem could be?

[@willydavid_]

There is a plugin with support for places?

[@DjAdfrox]

Hello Simon , is it possible to integrate ion-fab button with google-maps capacitor?

[@galaxies_dev]

I think so, you just need to play around with the different layers and opacity in your app then!

[@DjAdfrox]

@@galaxies_dev thank you very much, i will keep testing this

[@MariaDumitrescu-fo7pt]

Hi, Simon! Is there a way to draw route from multiple points to a map with this plugin? It is equivalent of polyline as the previous versions already have. If you have the possibility, please help me! Thanks!

[@galaxies_dev]

Haven't tried that yet Bibi!

[@GovindSinghSamrow48]

Got error: Error: node_modules/@capacitor/google-maps/dist/typings/definitions.d.ts:43:34 - error TS2503: Cannot find namespace 'google'.

[@dddanielsr]

Hi Simon, I tried both of your tutorials of the google maps pluggins. But both are failing on my android App, I can use them on the browser, but in mobile the element is present but there's no map displayed

[@niphyanto3146]

Hi..did you get any solution for the issue. I am also facing the same issue

[@dddanielsr]

@@niphyanto3146 I quit trying one month ago, I had to settle down for mapbox... I am not pleased with that workaround but it is working

[@afitoo4403]

Hello, just did like you guided but i dont see my map and in logs i can see: Line 1 - Msg: ERROR Error: Uncaught (in promise): Error: "CapacitorGoogleMaps" plugin is not implemented on android Error: "CapacitorGoogleMaps" plugin is not implemented on android

[@mahmoudmirzaei4701]

Hi Simon, Thanks for your great tutorial... Have you tested the app on an emulator? I have done what you said step by step, working on chrome, but not a physical or emulating device!

[@abenzoar]

Same

[@ahmaat19]

I was looking this video. I'm new to Ionic dev, but does this plugin support autocomplete places?

[@galaxies_dev]

No don't think it does at this point, also think it's a different Google API you have to use for that!

[@ahmaat19]

@@galaxies_dev yeah, I'm using now other js package. Thanks

[@vincenzodamico3054]

Hi Simon, Thanks for all 💙, seems that on mac with M1 Chip GoogleMapsUtils doesn't works on external device... 😢

[@vincenzodamico3054]

SORRY !!! saw only now The Google Maps SDK currently does not support running on simulators using the new M1-based Macbooks. This is a known and acknowledged issue and requires a fix from Google. If you are developing on a M1 Macbook, building and running on physical devices is still supported and is the recommended approach. Thanks for all 💙

[@galaxies_dev]

Thank you for posting the "solution" Enzo - only tried this on a real device!

[@brandon400]

is it secure to put clean api key in android manifest?

[@galaxies_dev]

Depends on whether you would use that key in a frontend app like a website as well?

[@estebansalinas3360]

great tutorial bro, when I try to put inside an ion-card it doesn't show me the map. any solution for that?

[@galaxies_dev]

Not sure if it can work like that as the native webview is basically behind your app, so you would hide the rest of the UI and the card!

[@cezarmezzalira]

Hi Simon, how are you going? Did you checked the property snippet was empty when you click on marker? I check this behavior here and I saw your video after implementing here. I hope this and other things you said on video has been fixed soon :) Thanks for sharing this content with us!

[@galaxies_dev]

Yeah it's still a very early look at the plugin and I'm sure the Capacitor team is actively working on the next updates already - otherwise you can open an issue on the Github repo!

[@mmashabanemogoboya7686]

how do i disable the map type controls?

[@vipinmishramd]

Hello sir, this is nice video. Thanks 4 this. I have a Question, How can we implement route direction between two locations like google map, ola ubar

[@galaxies_dev]

You could use the Directions API from Google for that!

[@brandon400]

bro could you implement directions api? in mobile

[@CarlosSanchez-dp9wv]

Is there a way to listen to a marker's drag and drop event?

[@galaxies_dev]

Not that I know of at this point..

[@Axelazo]

Hey Simon, I tried to use Capacitor with React, it worked once, but then I started getting this error Failed to parse source map from ode_modules\@googlemaps\markerclusterer\src enderer.ts

[@AGUNGKAYA]

try angular

[@finnlau3349]

Hey Simon, how can I disable all the UI ?

[@prashant43240]

Yes

[@finnlau3349]

@@prashant43240 how can I do that?

[@nodiced1]

@@prashant43240 yes with no code is such a lazy and unhelpful answer

[@yuchenglin2894]

is this plugin free of charge from google(SKU：Mobile Native Dynamic Maps / GMSMapView)?

[@galaxies_dev]

I think there is a limit in terms of requests after which you have to pay for the Google API.

[@yuchenglin2894]

@@galaxies_dev According to the Google Maps - Usage and Billing policy listed here, the "SKU: Mobile Native Dynamic Maps" with the "A GMSMapView object on iOS" is always charged with 0.00 USD. 🤔

[@DawitAbraham-ox2zw]

Any idea how to draw line between 2 markers?

[@galaxies_dev]

I think it's not yet implemented for this plugin :/

[@brandon400]

could you do it dawit?

[@DawitAbraham-ox2zw]

No, this feature was not implemented yet. So I ended up using Google Maps JS plugin instead.

[@brandon400]

@@DawitAbraham-ox2zw you mean you put in your html? at the end you didnt use the capacitor plugin right?

[@arbelaezdiego]

somebody could make it work for ios? White screen and no map is showed... :(

[@unknownroad]

is there any free alternative to google maps?

[@galaxies_dev]

I think Leaflet for example: leafletjs.com/

Can you please do that with Apple Maps JS? 🤩

[@galaxies_dev]

Good idea!

[@jehureyna3887]

i love you bro

[@prashant43240]

Hi Simon 🙂.. Please make tutorial on audio video call using webrtc

[@adel_dx]

up

[@MiguelGarrán]

desde España ole ole y ole

[@aaronargottelopez3488]

[@balintlengyel6305]

Hello Simon! Great tutorial again! I have az issue when I try this feature on real phone. (On Web it is working) "java.util.concurrent.ExecutionException: java.lang.SecurityException: GoogleCertificatesRslt: not allowed: pkg=io.ionic.starter" Any idea? :)

[@galaxies_dev]

Have you restricted your Maps key to a specific bundle ID for mobile apps?

[@balintlengyel6305]

​@@galaxies_dev Thank you for your fast reply. I use same ID for all, but I will create separe ID for different devices. Thank you

[@brandon400]

it it necessary to restric api key?

[@francolondra3350]

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. java.util.ConcurrentModificationException at java.util.ArrayList$Itr.next(ArrayList.java:860) at com.capacitorjs.plugins.googlemaps.CapacitorGoogleMapsPlugin.dispatchMapEvent(CapacitorGoogleMapsPlugin.kt:541) at java.lang.reflect.Method.invoke(Native Method) at com.getcapacitor.PluginHandle.invoke(PluginHandle.java:125) at com.getcapacitor.Bridge.lambda$callPluginMethod$0$com-getcapacitor-Bridge(Bridge.java:721) at com.getcapacitor.Bridge$$ExternalSyntheticLambda5.run(Unknown Source:8) at android.os.Handler.handleCallback(Handler.java:938) at android.os.Handler.dispatchMessage(Handler.java:99) at android.os.Looper.loop(Looper.java:236) at android.os.HandlerThread.run(HandlerThread.java:67) D/Capacitor: Sending plugin error: {"save":false,"callbackId":"99599765","pluginId":"CapacitorGoogleMaps","methodName":"dispatchMapEvent","success":false,"error":{"message":"Unhandled Error: null.","code":"0"}} V/Capacitor/CapacitorGoogleMapsPlugin: 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 CapacitorGoogleMaps.dispatchMapEvent (#99599732) VM3:217 result CapacitorGoogleMaps.addListener (#99599116) VM3:243 native CapacitorGoogleMaps.dispatchMapEvent (#99599733) VM3:217 result CapacitorGoogleMaps.addListener (#99599116) VM3:243 native CapacitorGoogleMaps.dispatchMapEvent (#99599734) VM3:217 result CapacitorGoogleMaps.dispatchMapEvent (#99599732) polyfills.8a98a597f426b6b1.js:1 Unhandled Promise rejection: Unhandled Error: null. ; Zone: ; Task: Promise.then ; Value: Error: Unhandled Error: null. at returnResult (VM3:741:32) at win.androidBridge.onmessage (VM3:716:21) Error: Unhandled Error: null. at returnResult (localhost/:741:32) at win.androidBridge.onmessage (localhost/:716:21)

[@galaxies_dev]

No actually haven't seen that before :/