Is there a way to show plugin UI in the ionic page itself?

Hi, I am working on custom plugin which involves showing a Google Map on the App. I wanted to use the native iOS SDK of Google Maps. So far I’m able to spawn a viewController and show the Google Map on my capacitor app successfully, using the native SDK.

Is there a way to show the map on the Ionic page itself ?

For example:
Users should be able to pass a “Div” , and map would get drawn inside the Div instead of getting drawn on a new screen.

Like here: https://github.com/mapsplugin/cordova-plugin-googlemaps#documentation

var options = {
  camera: {
    target: {lat: ..., lng: ...},
    zoom: 19
  }
};
var map = plugin.google.maps.Map.getMap(**mapDiv**, options). <- mapDiv being passed

In this cordova plugin, a new screen is not spawned on iOS and Android to show the map, instead it gets shown on the ionic page itself. I’m unable to get that done using capacitor.

If you can point me to right direction it’ll be really helpful. I haven’t found any community plugin which does that so there must be a reason for that , maybe its not possible. It’ll be extremely helpful if you can shed light on this issue.

Thanks!

PS: From what I found its possible with javascript SDK afaik, but its costly so I wanted to utilise the free native SDKs

Got it solved, https://github.com/hemangsk/capacitor-googlemaps-native for anyone looking for similar solution.
All props to the idea I found at https://github.com/TeamHive/capacitor-webview-overlay/ to pass the bounding box as argument to plugin.

1 Like