Finally POLYLINES with Google Maps & Capacitor 5 🎉

Capacitor 5.0 was released and along with critical updates for Android and iOS, their Capacitor Google Maps plugin got a big update! See me migrate a Capacitor app and use the updated Capacitor Google Maps plugin.

⚡️ Just getting started?

🤷‍♂️ Want more Ionic tutorials?

#############################

❤️ You can also find me on:

Or join the Simonics Facebook group:

#############################

[muckefux]

If TileOverlays were also implemented next, the switch from Cordova to Capacitor would actually be possible for me.

[archenisarchenis]

I recently tried Capacitor/google-maps package,
on the web it works fine,
on android it is complicated:
- you have to do some css tricks to show the map (background transparency on wrapping html elements),
- the map is not responsive (when screen orientation changes).
- To filter markers on the map, i had to delete everything then re-create markers. It's not ideal, it's also slow.
- You can't use your own ID for markers, so i had to make a mapping of my objects IDs with google-map marker IDs.
- The available API is in fact limited compared to the google-maps JS SDK.

Not to mention compilation errors you get at first. But that is more because of gradle, it makes you remember how native development is frustrating.

I tried integrating it for like 5 days. I switched to angular/google-maps and i nearly did all my work in like 2 days. I would really like capacitor/google-maps to work for me as it's more cost effective as the google dynamic maps mobile SDK is free to use.
I tried compiling an iOS version of my app, it failed, at this point i wasn't motivated to try to fix it anymore.

But Bravo to the capacitor team for putting so much effort into providing another official tool that tries to be cost effective and multi-platform. I can just imagine how hard it is to do. I'm sure it'll get better over time.

[nodiced]

I would love to see a way to check if a coordinate is inside of a polygon....but it looks like geometry is not a feature of this plugin yet.

[Kitidet]

Thank you very much for this great knowledge. If I wanted to give it a check. Is my current location in a polygon? What should I do? Thanks

[claudepiotte]

Hi Simon,
By copying precisely the code suggested in your video for addPolylines and addPoligons I get just one dot (the first one) after "ionic serve".

I'm working with ionic 7.2.0, angular 17.3.0 and capacitor 5.7.3.

I notice that the official Capacitor 5 structures are not respected in your code:
addPolygon is replaced by addPolygons.
The path or paths parameter does not exist in the polyline and polygon types given in typing Definitions.

Can you tell me what changes to make?

You're the only ones to provide clear, effective tutorials at this level.

I'm ready to follow your advice.
I could also use a tutorial on geolocation, fitBounds and addTileOverlay.

Thank you in advance
Claude

[priya_anom]

Hi, Is there any option to update marker location without removing it?

[Acal]

hi simon, tanks for your videos, i have a specific question about push i am developing a PWA using angular and firebase, when i test the push notifications on android and web, the push notifications works great, buo testing on IOS, it doesnt work, is there a way to make it work, or a page to help me with it (is a PWA, not a app(capacitor))

[shawqidia]

The addCircle only works on the web. It is not showing on Android.
Any idea please?

[tclark]

Skipped right over the incompatible package. Would like to know how to resolve that.

[indrapalijama]

can you also do the direction routes api pairing with polylines?

[kangnifredable]

Hi please could you help me on a project on ionic react using ubuntu. I want to join my SQL database to my ionic exact app

[shadowind]

I wonder if they solved the depth issue...