Module cordova-plugin-googlemaps.CordovaGoogleMaps already defined

Hi!

Please, can you tell me why am I getting
Uncaught module cordova-plugin-googlemaps.CordovaGoogleMaps already defined
error in my Ionic app?

Here’s what I have:

package.json:

{
  "name": "tx_client",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "5.2.4",
    "@angular/compiler": "5.2.4",
    "@angular/compiler-cli": "5.2.4",
    "@angular/core": "5.2.4",
    "@angular/forms": "5.2.4",
    "@angular/http": "5.2.4",
    "@angular/platform-browser": "5.2.4",
    "@angular/platform-browser-dynamic": "5.2.4",
    "@ionic-native/core": "4.5.3",
    "@ionic-native/google-maps": "^4.5.3",
    "@ionic-native/splash-screen": "4.5.3",
    "@ionic-native/status-bar": "^4.5.3",
    "@ionic/storage": "^2.1.3",
    "@types/googlemaps": "^3.30.5",
    "android-versions": "^1.3.0",
    "cordova-android": "^6.4.0",
    "cordova-browser": "5.0.3",
    "cordova-plugin-device": "^1.1.4",
    "cordova-plugin-geolocation": "^4.0.1",
    "cordova-plugin-googlemaps": "^2.2.3",
    "cordova-plugin-ionic-webview": "^1.1.16",
    "cordova-plugin-splashscreen": "^4.0.3",
    "cordova-plugin-statusbar": "^2.4.1",
    "cordova-plugin-whitelist": "^1.3.1",
    "ionic-angular": "3.9.2",
    "ionic-plugin-keyboard": "^2.2.1",
    "ionicons": "3.0.0",
    "lodash": "^4.17.5",
    "rxjs": "5.5.6",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.18"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.1.8",
    "typescript": "2.7.1"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-geolocation": {},
      "ionic-plugin-keyboard": {},
      "cordova-plugin-whitelist": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-googlemaps": {
        "API_KEY_FOR_ANDROID": "A_KEY",
        "PLAY_SERVICES_VERSION": "11.8.0"
      }
    },
    "platforms": [
      "browser",
      "android"
    ]
  }
}

index.js:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="UTF-8">
  <title>Ionic App</title>
  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">

  <meta charset="utf-8">
  <meta http-equiv="Content-Security-Policy" content="
               script-src 'self' 'unsafe-inline' 'unsafe-eval'
                           http://192.168.1.11:35729/livereload.js
                           http://192.168.1.11:8100
                           localhost:*
                           ;
               style-src  'self' 'unsafe-inline'">

  <allow-navigation href="*" />
  <content src=“index.html” />
  <content original-src=“index.html” />

  <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">

  <link rel="manifest" href="manifest.json">
  <meta name="theme-color" content="#4e8ef7">

  <!-- add to homescreen for ios -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">

  <!-- cordova.js required for cordova apps -->
  <script src="cordova.js"></script>

  <!--<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCDIcgf9Yxd093_1YzswzC4jmGoQmiaAns"></script>-->

  <!-- un-comment this code to enable service worker
  <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('service-worker.js')
        .then(() => console.log('service worker installed'))
        .catch(err => console.error('Error', err));
    }
  </script>-->

  <link href="build/main.css" rel="stylesheet">

</head>
<body>

  <!-- Ionic's root component and where the app will load -->
  <ion-app></ion-app>

  <!-- The polyfills js is generated during the build process -->
  <script src="build/polyfills.js"></script>

  <!-- The vendor js is generated during the build process
       It contains all of the dependencies in node_modules -->
  <script src="build/vendor.js"></script>

  <!-- The main bundle js is generated during the build process -->
  <script src="build/main.js"></script>

</body>
</html>

order.ts (page that should use google-map):

import {Component, ElementRef, ViewChild} from '@angular/core';
import {IonicPage, NavController, Platform} from 'ionic-angular';
import {StorageSRV} from "../../../../../../srv/storage.srv";
import {UserPropSRV} from "../../../../../../srv/usr-prop.srv";
import {GoogleMap, GoogleMapOptions, GoogleMaps, GoogleMapsEvent} from "@ionic-native/google-maps";

@IonicPage()
@Component({
  selector: 'order',
  templateUrl: 'order.html'
})
export class ClientOrder {

  @ViewChild('map') mapElement: ElementRef;
  map: GoogleMap;

  constructor(public navCtrl: NavController, private storage: StorageSRV, private pair: UserPropSRV,
              private googleMaps: GoogleMaps, private platform: Platform)  {
  }

  ngAfterViewInit() {
    this.platform.ready().then(() => {
      this.loadMap();
    })
  }

  loadMap() {

    let mapOptions: GoogleMapOptions = {
      camera: {
        target: {
          lat: 43.0741904,
          lng: -89.3809802
        },
        zoom: 18,
        tilt: 30
      }
    };

    this.map = GoogleMaps.create('map', mapOptions);

    // Wait the MAP_READY before using any methods.
    this.map.one(GoogleMapsEvent.MAP_READY)
      .then(() => {
        console.log('Map is ready!');

        // Now you can use all methods safely.
        this.map.addMarker({
          title: 'Ionic',
          icon: 'blue',
          animation: 'DROP',
          position: {
            lat: 43.0741904,
            lng: -89.3809802
          }
        })
          .then(marker => {
            marker.on(GoogleMapsEvent.MARKER_CLICK)
              .subscribe(() => {
                alert('clicked');
              });
          });

      })
      .catch(err => {
        console.log(err)
      });
  }
}

messing up with google-maps for 3days, its really annoying and I need to start some real development.

Thanks for advices!

$> cordova plugin rm cordova-plugin-googlemaps

$> cordova plugin add cordova-plugin-googlemaps@2.2.4 --variable API_KEY_FOR_ANDROID="..."  --variable API_KEY_FOR_IOS="..."