Ionic Google Maps Capacitor

Question

Can I use this Ionic Google Maps plug-in with capacitor( https://github.com/mapsplugin/cordova-plugin-googlemaps-doc ) ? I Try

npm install cordova-plugin-googlemaps npm install @ionic-native/googlemaps

But without success. How I install it with capacitor ? And how I get the current position ? I'm using Angular.

I need use it because the native Geolocation does't work with old Android versions.

Chetan Bansal Chetan Bansal · Accepted Answer · 2020-06-28T07:01:32

Specific for Capacitor, google maps works perfectly.

I would suggest you follow this tutorial. You can ignore the nativegeocoder implementation in the tutorial if you don't need it.

The above tutorial is based on including the javascript api in your index.html file and then referencing it in your code.

Works perfectly with all the functionalities mentioned in the google javascript docs.

There are two ways of implementing google maps in an ionic capacitor app.

Using a cordova plugin (which integrates google maps native SDK)
Using the google maps javascript API

Read this article to understand the difference

Another tutorial for implementing google maps

Do not forget to put this after you import statements in your .ts file where you need to access the map.

declare var google;

Once you have integrated it like it is done in the tutorial, for Google geolocation, add this..

this.googleGeocoder = new google.maps.Geocoder();
this.googleGeocoder.geocode({'location': latlng},(results,status)=>{
  if (status === 'OK') {
     // do your stuff
  }
})

Ionic Google Maps Capacitor

2 Answers