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!