Ionic Google Maps Capacitor

user_3886012 0
Viewed 8776

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.

ionic-framework angular typescript maps
2 Answers

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.

  1. Using a cordova plugin (which integrates google maps native SDK)
  2. 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
  }
})
user_53799360

You mistyped the package name, it is @ionic-native/google-maps, not @ionic-native/googlemaps. Also, if you are using @ionic-native/google-maps, you don't need to install the other package.

For installation, first you must create Google Maps API keys.

Then, run:

npm install @ionic-native/core@beta @ionic-native/google-maps@beta

ionic cordova plugin add https://github.com/mapsplugin/cordova-plugin-googlemaps#multiple_maps --variable API_KEY_FOR_ANDROID="..." --variable API_KEY_FOR_IOS="..."

replacing the ...s with your API keys.

Regarding getting the current position, you need to use LocationService.getMyLocation() to get the current location. Here is the documentation and a tutorial.

user_114857850
Related