How to use the Capacitor Google Maps plugin with Ionic React (Ionic Framework)
The Ionic team recently announced the new Capacitor plugin for Google Maps. This enables us as developers to easily utilize the API to get maps into our mobile apps.
I will show you how to implement Google Maps, along with markers and marker click events with a bottom sheet modal using Ionic React.
#############################
🔗 Announcement blog post
https://ionicframework.com/blog/annou...
🔗 Capacitor Google Maps API Reference
https://capacitorjs.com/docs/apis/goo...
🔗 Github repo - Tutorial code
https://github.com/alanmontgomery/ion...
🎉 Reach out to me
/ 93alan
💙 UI Examples with Code and Live Demos
https://ionicreacthub.com
#############################
00:00 Introduction
00:46 Announcement Post
00:57 Installing plugin
01:03 iOS info.plist and Android manifest
01:27 Signing up for Google Cloud Console
01:53 Enabling Maps SDKs
02:51 Generating API Key
04:35 Map Ref and variable
06:00 Initializing the Map
07:08 Google Map Web Component
08:19 Map creation with lifecycle hook
08:45 Setting center in map config
09:58 Changing zoom value
10:37 Adding map markers
12:29 Bottom Sheet Modal to display info
14:57 Adding click events to markers
17:18 Map markers rendering
18:36 Outro
#ionic #capacitor #webnative #react #reactjs #ionicreact #capacitor #googlemaps