How to install cordova-google-maps properly in an Ionic 3 project?


#1

I am trying to use ionic-native/google-maps and cordova-plugin-googlemaps in my Ionic 3 application for both Android and iOS.

  1. At first, i got the api keys for both android and iOS from the google developer console.
  2. Then installed the cordova map plugin and ionic native google map plugin using below command:
ionic cordova plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="..." --variable API_KEY_FOR_IOS="..."
npm install @ionic-native/core @ionic-native/google-maps
  1. Then, tried to build the project and got below error:

more than one library with package name ‘com.google.android.gms.license’

And, at that time i had these configuration in config.xml:

<plugin name="cordova-plugin-googlemaps" spec="^2.2.9">
        <variable name="API_KEY_FOR_ANDROID" value="*******" />
        <variable name="API_KEY_FOR_IOS" value="*******" />
        <variable name="PLAY_SERVICES_VERSION" value="12.0.0" />
        <variable name="ANDROID_SUPPORT_V4_VERSION" value="24.1.0" />
    </plugin>

I googled and found out that, this PLAY_SERVICES_VERSION is causing the problem. So, i changed it to 12.0.1 from 12.0.0. Then again added the platform for android from the start after deleting the node_modules, plugins and platforms folder from the project. But, then i got the below error:

Execution failed for task ‘:transformClassesWithDexForDebug’.
com.android.build.api.transform.TransformException: com.android.ide.common.process.ProcessException: java.util.concurrent.ExecutionException: com.android.dex.DexException: Multiple dex files define Lcom/google/android/gms/auth/api/signin/internal/zzo;

Now, in my config.xml, i have

    <plugin name="cordova-plugin-googlemaps" spec="^2.2.9">
        <variable name="API_KEY_FOR_ANDROID" value="*******" />
        <variable name="API_KEY_FOR_IOS" value="*******" />
        <variable name="PLAY_SERVICES_VERSION" value="12.0.1" />
        <variable name="ANDROID_SUPPORT_V4_VERSION" value="24.1.0" />
    </plugin>

So, i again changed the PLAY_SERVICES_VERSION from 12.0.1 to 11.6.0. Now, i can build the project without any error but problem is when i run the project, it is installing the apk in the device but it’s not opening the project.

I have “firebase”: “^4.13.1” and “angularfire2”: “^5.0.0-rc.5-next” in my package.json.

Can anyone point me out what steps should i take to work with google maps in my project?