To native (Cordova plugin): callbackId: INVALID
almaz1213 opened this issue · 22 comments
almaz1213 commented
I'm submitting a ... (check one with "x")
- any problem or bug report
OS: (check one with "x")
- Android
cordova information: (run $> cordova plugin list)
com-sarriaroman-photoviewer 1.2.4 "PhotoViewer"
cordova-plugin-device 2.0.2 "Device"
cordova-plugin-googlemaps 2.7.1 "cordova-plugin-googlemaps"
cordova-plugin-ionic-keyboard 2.2.0 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 4.2.1 "cordova-plugin-ionic-webview"
cordova-plugin-market 1.2.0 "Market"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-statusbar 2.4.2 "StatusBar"
cordova-plugin-whitelist 1.3.3 "Whitelist"
If you use @ionic-native/google-maps, please tell the package.json (only @ionic-native/core and @ionic-native/google-maps are fine mostly)
"@ionic-native/core": "^5.0.0",
"@ionic-native/google-maps": "^5.27.0-beta-20200630",
Current behavior:
the plugin works when i use it in browser platform, but does not in android: the map does not appear
in AVD:
in browser:
Expected behavior:
should work as in browser platform
Related code, data or error log (please format your code or data):
........
04-24 21:04:47.821 4280-4280/space.diamo.iol.dinka W/Capacitor/Console: File: http://localhost/main-es5.js - Line 1111 - Msg: ac create sideDialogs amount: 1
04-24 21:04:48.036 4280-4311/space.diamo.iol.dinka D/Capacitor: Handling local request: http://localhost/svg/list.svg
04-24 21:04:48.037 4280-4311/space.diamo.iol.dinka D/Capacitor: Handling local request: http://localhost/svg/funnel.svg
04-24 21:04:48.060 4280-4311/space.diamo.iol.dinka D/Capacitor: Handling local request: http://localhost/assets/icon/cross32.png
04-24 21:04:48.221 4280-4390/space.diamo.iol.dinka V/Capacitor/Plugin: To native (Cordova plugin): callbackId: CordovaGoogleMaps465070611, service: CordovaGoogleMaps, action: putHtmlElements, actionArgs: [{"root":{"pointerEvents":"auto","isMap":false,"size":{"left":0,"top":0,"width":412,"height":659,"right":412,"bottom":659},"zIndex":{"isInherit":false,"z":0},"children":[],"overflowX":"hidden","overflowY":"hidden","containMapIDs":{"map_0_995498701643":1}},"pgm1074984375659":{"pointerEvents":"auto","isMap":false,"size":{"left":0,"top":0,"width":0,"height":0,"right":0,"bottom":0},"zIndex":{"isInherit":true,"z":0},"children":[],"overflowX":"visible","overflowY":"visible","containMapIDs":{"map_0_995498701643":1}},"pgm240969442448":{"pointerEvents":"auto","isMap":true,"size":{"left":0,"top":96,"width":412,"height":623,"right":412,"bottom":719},"zIndex":{"isInherit":true,"z":0},"children":[],"overflowX":"visible","overflowY":"visible","containMapIDs":{"map_0_995498701643":1}},"pgm1342562245526":{"pointerEvents":"auto","isMap":false,"size":{"left":0,"top":96,"width":412,"height":603,"right":412,"bottom":699},"zIndex":{"isInherit":true,"z":0},"children":[],"overflowX":"hidden","overflowY":"auto","containMapIDs":{"map_0_995498701643":1}},"pgm211059923104":{"pointerEvents":"auto","isMap":false,"size":{"left":0,"top":96,"width":412,"height":603,"right":412,"bottom":699},"zIndex":{"isInherit":true,"z":0},"children":[],"overflowX":"visible","overflowY":"visible","containMapIDs":{"map_0_995498701643":1}},"pgm1136064293568":{"pointerEvents":"auto","isMap":false,"size":{"left":0,"top":40,"width":412,"height":659,"right":412,"bottom":699},"zIndex":{"isInherit":false,"z":0},"children":[],"overflowX":"hidden","overflowY":"hidden","containMapIDs":{"map_0_995498701643":1}},"pgm677369747966":{"pointerEvents":"auto","isMap":false,"size":{"left":0,"top":40,"width":412,"height":659,"right":412,"bottom":699},"zIndex":{"isInherit":false,"z":10},"children":[],"overflowX":"hidden","overflowY":"hidden","containMapIDs":{"map_0_995498701643":1}},"pgm1179014251766":{"pointerEvents":"auto","isMap":false,"size":{"left":0,"top":0,"width":412,"height":659,"right":412,"bottom":659},"zIndex":{"isInherit":false,"z":20001},"children":[],"overflowX":"visible","overflowY":"visible","containMapIDs":{"map_0_995498701643":1}},"pgm1221576925052":{"pointerEvents":"auto","isMap":false,"size":{"left":0,"top":0,"width":412,"height":659,"right":412,"bottom":659},"zIndex":{"isInherit":false,"z":0},"children":[],"overflowX":"hidden","overflowY":"hidden","containMapIDs":{"map_0_995498701643":1}},"pgm411740774897":{"pointerEvents":"auto","isMap":false,"size":{"left":0,"top":0,"width":412,"height":659,"right":412,"bottom":659},"zIndex":{"isInherit":false,"z":0},"children":[],"overflowX":"visible","overflowY":"visible","containMapIDs":{"map_0_995498701643":1}}}]
04-24 21:04:48.808 4280-4390/space.diamo.iol.dinka V/Capacitor/Plugin: To native (Cordova plugin): callbackId: INVALID, service: map_0_995498701643, action: detachFromWebView, actionArgs: []
04-24 21:04:48.990 4280-4390/space.diamo.iol.dinka V/Capacitor/Plugin: To native (Cordova plugin): callbackId: CordovaGoogleMaps465070612, service: CordovaGoogleMaps, action: getMap, actionArgs: [{"__pgmId":"map_0_995498701643","depth":135933067},{"camera":{"target":{},"zoom":16},"preferences":{"zoom":{"minZoom":4}},"controls":{"compass":false,"myLocationButton":true,"myLocation":true,"indoorPicker":true,"zoom":false,"mapToolbar":false},"styles":"[{\"featureType\":\"poi\",\"elementType\":\"all\",\"stylers\":[{\"visibility\":\"off\"}]}]","gestures":{"scroll":true,"tilt":true,"zoom":true,"rotate":true}},"pgm240969442448"]
04-24 21:04:48.994 4280-4390/space.diamo.iol.dinka V/Capacitor/Plugin: To native (Cordova plugin): callbackId: INVALID, service: map_0_995498701643, action: attachToWebView, actionArgs: []
04-24 21:04:48.994 4280-4390/space.diamo.iol.dinka W/System.err: java.lang.AssertionError
04-24 21:04:48.994 4280-4390/space.diamo.iol.dinka W/System.err: at org.apache.cordova.CordovaPlugin.privateInitialize(CordovaPlugin.java:52)
04-24 21:04:48.994 4280-4390/space.diamo.iol.dinka W/System.err: at org.apache.cordova.PluginManager.getPlugin(PluginManager.java:171)
04-24 21:04:48.994 4280-4390/space.diamo.iol.dinka W/System.err: at org.apache.cordova.PluginManager.exec(PluginManager.java:122)
04-24 21:04:48.994 4280-4390/space.diamo.iol.dinka W/System.err: at com.getcapacitor.MessageHandler.callCordovaPluginMethod(MessageHandler.java:107)
04-24 21:04:48.994 4280-4390/space.diamo.iol.dinka W/System.err: at com.getcapacitor.MessageHandler.postMessage(MessageHandler.java:51)
04-24 21:04:48.994 4280-4390/space.diamo.iol.dinka W/System.err: at com.android.org.chromium.base.SystemMessageHandler.nativeDoRunLoopOnce(Native Method)
04-24 21:04:48.994 4280-4390/space.diamo.iol.dinka W/System.err: at com.android.org.chromium.base.SystemMessageHandler.handleMessage(SystemMessageHandler.java:28)
04-24 21:04:48.994 4280-4390/space.diamo.iol.dinka W/System.err: at android.os.Handler.dispatchMessage(Handler.java:102)
04-24 21:04:48.994 4280-4390/space.diamo.iol.dinka W/System.err: at android.os.Looper.loop(Looper.java:135)
04-24 21:04:48.994 4280-4390/space.diamo.iol.dinka W/System.err: at android.os.HandlerThread.run(HandlerThread.java:61)
04-24 21:04:48.999 4280-4280/space.diamo.iol.dinka E/Capacitor/Console: File: http://localhost/polyfills-es5.js - Line 15728 - Msg: Unhandled Promise rejection:
.....
almaz1213 commented
API key has no any restriction
wf9a5m75 commented
Please share your project files on github. Information is too less.
almaz1213 commented
$ ionic info
Ionic:
Ionic CLI : 6.13.1 (/home/diamo/.nvm/versions/node/v12.16.3/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 5.0.4
@angular-devkit/build-angular : 0.900.4
@angular-devkit/schematics : 8.3.25
@angular/cli : 9.0.4
@ionic/angular-toolkit : 2.2.0
Capacitor:
Capacitor CLI : 2.4.7
@capacitor/core : 2.4.7
Cordova:
Cordova CLI : 10.0.0
Cordova Platforms : 6.0.0, android 9.1.0, browser
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 7 other plugins)
Utility:
cordova-res : 0.15.3
native-run (update available: 1.3.0) : 0.3.0
System:
Android SDK Tools : 26.1.1 (/home/diamo/Android/Sdk)
NodeJS : v12.16.3 (/home/diamo/.nvm/versions/node/v12.16.3/bin/node)
npm : 6.14.4
OS : Linux 5.4
almaz1213 commented
config.xml:
<?xml version='1.0' encoding='utf-8'?>
<widget id="space.diamo.iol.dinka" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>DinKa</name>
<description>Dates in car</description>
<author email="alik@e-gove.net" href="http://iol.diamo.space">Alik Cagol</author>
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<allow-navigation href="http://172.20.10.3:4210" sessionid="06c8b98e" />
<content original-src="index.html" src="http://172.20.10.3:4210" />
<preference name="ScrollEnabled" value="false" />
<preference name="android-minSdkVersion" value="21" />
<preference name="BackupWebStorage" value="none" />
<preference name="SplashMaintainAspectRatio" value="true" />
<preference name="FadeSplashScreenDuration" value="300" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="3000" />
<preference name="GOOGLE_MAPS_ANDROID_API_KEY" value="AIzaSyDLzKyekn********gtrN8pX39awZAjw" />
</widget>
almaz1213 commented
map.component.html:
<ion-header translucent *ngIf="inData?.command !== 'address'">
<ion-toolbar>
<ion-title>{{c.sideDialogs.get(this.dialogKey).title}}<span>. {{c.l.i187}}
: {{radiusTitle}} km</span>
</ion-title>
<ion-buttons slot="end" *ngIf="compMode === 0">
<ion-button (click)="c.closeSideDialog(this.dialogKey)">
<ion-icon slot="icon-only" name="close"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-searchbar #searchbar *ngIf="inData?.command === 'address'" [placeholder]="c.l.i202" (keyup.enter)="search(searchbar.value)" inputmode="search" type="text" (ionClear)="address = {addr: null, lat: null, lon: null, countryCode: null}">
</ion-searchbar>
<ion-content fullscreen>
<div id="map_canvas"></div>
..........
almaz1213 commented
map.component.ts:
import {Component, Input, ViewChild} from '@angular/core';
import {IonSearchbar} from "@ionic/angular";
import {
GoogleMaps,
GoogleMap,
GoogleMapsEvent,
Geocoder, GeocoderRequest, GeocoderResult,
Marker,
ILatLng, MarkerOptions,
Environment, BaseArrayClass
} from '@ionic-native/google-maps';
import {CommService} from "../comm.service";
import {GeoLoc, InAppProtocol, OrderObserverEvent, Order} from "../interfaces";
import {filter, share} from "rxjs/operators";
@Component({
selector: 'app-map',
templateUrl: './map.component.html',
styleUrls: ['./map.component.scss'],
})
export class MapComponent {
@Input() dialogKey: number;
@ViewChild(IonSearchbar) searchbar: IonSearchbar;
private lat: number;
private lon: number;
private zoom = 13;
private radius = 0;
radiusTitle = 0;
inData;
private order: Order;
compMode = 0; //0 - map, 1 - list
private map: GoogleMap;
private meMarker: Marker;
private markers: Record<string, { order: Order, marker: Marker, dist: number }> = {};
private addrFoundByAddress = false;
orderList: {
code: string;
type: number;
nick: string;
gender: number;
img: string;
userId: number;
radius_km?: number;
price_km?: number;
dist: any;
currency?: string;
payCash?: boolean;
paySinhro?: boolean;
payIou?: boolean;
carModel?: string;
carImg?: string;
seats?: number;
}[];
sortBy: string; //dist | price | dont
filter: Record<string, any>;
private tmp;
address = {addr: null, lat: null, lon: null, countryCode: null};
constructor(public c: CommService) {
this.c.inAppCommX.pipe(
filter(d => (d['to'] === 'mapComp' || d['to'] === 'all' && d.hasOwnProperty('command'))),
share()
).subscribe((d: InAppProtocol) => {
if (d.command !== null && d.command in this && typeof this[d.command] == 'function') {
this[d.command](d.data, d.callBack, d.from);
}
});
}
ionViewWillEnter() {
this.inData = this.c.sideDialogs.get(this.dialogKey).inData;
try {
this.order = this.inData.data.order;
} catch (e) {
}
this.lat = this.c.geoLoc.lat;
this.lon = this.c.geoLoc.lon;
if (this.c.platform === 0) { // 0 means browser platform
Environment.setEnv({
API_KEY_FOR_BROWSER_DEBUG: this.c.appConfig.googleMapsJSDebugKey.val,
API_KEY_FOR_BROWSER_RELEASE: this.c.appConfig.googleMapsJSDebugKey.val
})}
let mapOpts = {
camera: {
target: {
lat: this.lat,
lng: this.lon
},
zoom: this.zoom
},
preferences: {
zoom: {
minZoom: 4
}
},
controls: {
compass: false,
myLocationButton: true,
myLocation: true, // (blue dot)
indoorPicker: true,
zoom: false, // android only
mapToolbar: false // android only
},
styles: [
{
"featureType": "poi",
"elementType": "all",
"stylers": [
{"visibility": "off"}
]
}
],
gestures: {
scroll: true,
tilt: true,
zoom: true,
rotate: true
}
}
if (this.inData.command === 'watch') {
this.zoom = 16;
mapOpts.camera.zoom = 16;
}
if (this.inData.command === 'address') {
if (this.inData.hasOwnProperty('data') && this.inData.data.addr) {
this.address = this.inData.data;
}
this.zoom = 18;
mapOpts.camera.zoom = 18;
}
this.map = GoogleMaps.create('map_canvas', mapOpts);
this.map.addEventListener(GoogleMapsEvent.MAP_READY).subscribe(() => {
if (this.inData.command === 'getAddress') {
Geocoder.geocode(this.inData.data)
.then((res: GeocoderResult[]) => {
//console.log('res=', res);
try {
this.address.addr = res[0].extra.lines.join(', ');
this.address.lat = res[0].position.lat;
this.address.lon = res[0].position.lng;
this.address.countryCode = res[0].countryCode;
} catch (e) {
}
this.ok();
})
return;
}
if (this.inData.command === 'watch') {
/*
const ll = this.map.getCameraPosition().target;
this.lat = ll.lat;
this.lon = ll.lng;
this.map.addMarker({
position: {lat: this.lat, lng: this.lon},
icon: {
url: '../../assets/icon/eye.png',
size: {
width: 32,
height: 32
}
},
anchor: [16, 16]
})
this.setRadiusFromLoc(this.map.getVisibleRegion().southwest, this.map.getVisibleRegion().northeast);
*/
console.debug('map radius changed:', this.radius);
this.order.jobRadius = this.radius;
/*
this.c.be.setOrderLoc(this.order.code, [this.lat, this.lon], d => {
if (d && !d.hasOwnProperty('err')) {
this.c.be.observeMatchedOrders(this.order.code, true, this.order.jobRadius, this.matchedOrderObserver);
}
});
*/
console.debug('map center changed in map init:');
}
if (this.inData.command === 'order') {
this.map.addMarker({
position: {lat: this.lat, lng: this.lon},
icon: {
url: '../../assets/icon/cross32.png',
size: {
width: 19,
height: 19
}
},
anchor: [9, 9]
}).then((m: Marker) => {
this.meMarker = m
})
if (this.order.type === 1) {
this.setRadiusFromLoc(this.map.getVisibleRegion().southwest, this.map.getVisibleRegion().northeast);
this.order.jobRadius = this.radius;
} else {
this.order.jobRadius = this.order.fields.radius_km;
this.radius = this.order.jobRadius;
this.radiusTitle = Math.round(this.radius * 100) / 100;
}
this.c.be.setOrderLoc(this.order.code, [this.lat, this.lon], d => {
if (d && !d.hasOwnProperty('err')) {
this.c.be.observeMatchedOrders(this.order.code, true, this.order.jobRadius, this.matchedOrderObserver);
}
});
}
if (this.inData.command === 'address') {
if (this.address.lat && this.address.lon) {
this.addrFoundByAddress = true;
this.map.animateCamera({
target: {lat: this.address.lat, lng: this.address.lon},
zoom: 19,
duration: 3000
})
}
this.searchbar.setFocus();
}
});
this.map.on(GoogleMapsEvent.CAMERA_MOVE_END).subscribe(d => {
if (this.inData.command === 'watch') {
const ll = this.map.getCameraTarget();
if (this.lat !== ll.lat || this.lon !== ll.lng) {
this.lat = ll.lat;
this.lon = ll.lng;
this.c.be.setOrderLoc(this.order.code, [this.lat, this.lon]);
this.recalcMarkerDists();
console.debug('map center changed:', ll);
}
if (this.zoom !== d[0].zoom) {
this.zoom = d[0].zoom;
this.setRadiusFromLoc(this.map.getVisibleRegion().southwest, this.map.getVisibleRegion().northeast);
this.order.jobRadius = this.radius;
this.c.be.observeMatchedOrders(this.order.code, true, this.order.jobRadius, this.matchedOrderObserver);
console.debug('map radius changed:', this.radius, d);
}
}
});
this.map.on(GoogleMapsEvent.MAP_DRAG_END).subscribe(d => {
if (this.addrFoundByAddress) {
this.address.addr = null;
this.address.lat = null;
this.address.lon = null;
this.address.countryCode = null;
this.addrFoundByAddress = false;
this.searchbar.value = null;
}
})
//this.test();
}
........
almaz1213 commented
variables.gradle:
ext {
minSdkVersion = 21
compileSdkVersion = 29
targetSdkVersion = 29
androidxAppCompatVersion = '1.1.0'
androidxCoreVersion = '1.2.0'
androidxMaterialVersion = '1.1.0-rc02'
androidxBrowserVersion = '1.2.0'
androidxLocalbroadcastmanagerVersion = '1.0.0'
androidxExifInterfaceVersion = '1.2.0'
firebaseMessagingVersion = '20.1.2'
playServicesLocationVersion = '17.0.0'
junitVersion = '4.12'
androidxJunitVersion = '1.1.1'
androidxEspressoCoreVersion = '3.2.0'
cordovaAndroidVersion = '7.0.0'
}
wf9a5m75 commented
Oh, my...
Thanks, but I prefer the files share to reproduce your problem.
Did you find out which code cause the error?
almaz1213 commented
i think problem is not in my code.
i just did npm install --save git://github.com/mapsplugin/cordova-plugin-googlemaps.git#multiple_maps and rebuilt.
android studio build log now shows:
/home/diamo/eclipse_ws/DinKa/bridle/android/capacitor-cordova-android-plugins/src/main/java/plugin/google/maps/PluginPolyline.java:6: error: package com.google.android.libraries.maps.model does not exist
import com.google.android.libraries.maps.model.CircleOptions;
^
/home/diamo/eclipse_ws/DinKa/bridle/android/capacitor-cordova-android-plugins/src/main/java/plugin/google/maps/PluginPolyline.java:7: error: package com.google.android.libraries.maps.model does not exist
import com.google.android.libraries.maps.model.LatLng;
^
/home/diamo/eclipse_ws/DinKa/bridle/android/capacitor-cordova-android-plugins/src/main/java/plugin/google/maps/PluginPolyline.java:8: error: package com.google.android.libraries.maps.model does not exist
import com.google.android.libraries.maps.model.LatLngBounds;
^
/home/diamo/eclipse_ws/DinKa/bridle/android/capacitor-cordova-android-plugins/src/main/java/plugin/google/maps/PluginPolyline.java:9: error: package com.google.android.libraries.maps.model does not exist
import com.google.android.libraries.maps.model.MarkerOptions;
^
/home/diamo/eclipse_ws/DinKa/bridle/android/capacitor-cordova-android-plugins/src/main/java/plugin/google/maps/PluginPolyline.java:10: error: package com.google.android.libraries.maps.model does not exist
import com.google.android.libraries.maps.model.Polyline;
^
/home/diamo/eclipse_ws/DinKa/bridle/android/capacitor-cordova-android-plugins/src/main/java/plugin/google/maps/PluginPolyline.java:11: error: package com.google.android.libraries.maps.model does not exist
import com.google.android.libraries.maps.model.PolylineOptions;
^
wf9a5m75 commented
Please try to set AndroidX=True
almaz1213 commented
already mate. yesterday
almaz1213 commented
also, in package.json:
"cordova-plugin-androidx": "^3.0.0",
"cordova-plugin-androidx-adapter": "^1.1.3",
almaz1213 commented
android.enableJetifier=true is set, too
almaz1213 commented
i reinstalled all acording documentations and now in android studio:
.....
04-25 03:36:30.801 3621-3621/space.diamo.iol.dinka D/Capacitor/Console: File: http://localhost/main-es5.js - Line 1098 - Msg: Gonna show dialog: MapComponent key=1619296590800
04-25 03:36:30.807 3621-3680/space.diamo.iol.dinka D/Capacitor: Handling local request: http://localhost/39-es5.js
04-25 03:36:30.830 3621-3680/space.diamo.iol.dinka D/Capacitor: Handling local request: http://localhost/11-es5.js
04-25 03:36:30.860 3621-3621/space.diamo.iol.dinka W/Capacitor/Console: File: http://localhost/main-es5.js - Line 1111 - Msg: ac create sideDialogs amount: 1
04-25 03:36:30.927 3621-3621/space.diamo.iol.dinka W/Capacitor/Console: File: http://localhost/vendor-es5.js - Line 128859 - Msg: Native: tried accessing the GoogleMaps plugin but Cordova is not available. Make sure to include cordova.js or run in a device/simulator
04-25 03:36:30.929 3621-3621/space.diamo.iol.dinka E/Capacitor/Console: File: http://localhost/vendor-es5.js - Line 18589 - Msg: ERROR
.......
almaz1213 commented
Please share your project files on github. Information is too less.
i shared the project. confirm the invitation plz
almaz1213 commented
after reinstallation ionic capacitor device.getinfo returns web platform on android device. oghh.......
wf9a5m75 commented
Oh, this plugin doesn't support capacitor yet
almaz1213 commented
ok. it means there iz pleace to grow up for u )
wf9a5m75 commented
The next version supports capacitor platform, but it's still under development
almaz1213 commented
ok. nice. i 'll use js version so far. u also consider including openmap/street plugin. all the best
almaz1213 commented
development/project management is getting worse
almaz1213 commented
since significant changes in cordova's last versions it makes a lot problems for use your awesome plugin. you should implement it in as capacitor native plugin. wish u all the best with that. i'm closing this issue so far