As soon as updated cordova to version 10.0.0. My map view is just blank. No error is being thrown. I am sharing the Ionic info and dependency list below. I have tried creating a new API ke and adding it to the app nothing is working.
Info:
Ionic:
Ionic CLI : 6.16.3 (/home/abhishyam/.nvm/versions/node/v12.19.0/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 5.8.0
@angular-devkit/build-angular : 12.1.4
@angular-devkit/schematics : 12.1.4
@angular/cli : 12.1.4
@ionic/angular-toolkit : 4.0.0
Cordova:
Cordova CLI : 10.0.0
Cordova Platforms : android 10.0.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 5 other plugins)
Utility:
cordova-res (update available: 0.15.3) : 0.15.2
native-run (update available: 1.4.1) : 1.2.2
System:
Android SDK Tools : 26.1.1 (/home/abhishyam/android-sdk)
NodeJS : v12.19.0 (/home/abhishyam/.nvm/versions/node/v12.19.0/bin/node)
npm : 6.14.9
OS : Linux 5.4
package.json
{
"name": "nearby-restaurants",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "https://ionicframework.com/",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/common": "~12.1.1",
"@angular/core": "~12.1.1",
"@angular/forms": "~12.1.1",
"@angular/platform-browser": "~12.1.1",
"@angular/platform-browser-dynamic": "~12.1.1",
"@angular/router": "~12.1.1",
"@ionic-native/core": "^5.36.0",
"@ionic-native/geolocation": "^5.36.0",
"@ionic-native/google-maps": "^5.5.0",
"@ionic/angular": "^5.5.2",
"rxjs": "~6.6.0",
"tslib": "^2.2.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "~12.1.1",
"@angular-eslint/builder": "~12.0.0",
"@angular-eslint/eslint-plugin": "~12.0.0",
"@angular-eslint/eslint-plugin-template": "~12.0.0",
"@angular-eslint/template-parser": "~12.0.0",
"@angular/cli": "~12.1.1",
"@angular/compiler": "~12.1.1",
"@angular/compiler-cli": "~12.1.1",
"@angular/language-service": "~12.0.1",
"@ionic/angular-toolkit": "^4.0.0",
"@types/jasmine": "~3.6.0",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^12.11.1",
"@typescript-eslint/eslint-plugin": "4.16.1",
"@typescript-eslint/parser": "4.16.1",
"cordova-android": "^10.0.0",
"cordova-plugin-androidx-adapter": "^1.1.3",
"cordova-plugin-device": "2.0.2",
"cordova-plugin-googlemaps": "^2.7.1",
"cordova-plugin-ionic-keyboard": "^2.0.5",
"cordova-plugin-ionic-webview": "^4.0.0",
"cordova-plugin-splashscreen": "5.0.2",
"cordova-plugin-statusbar": "2.4.2",
"eslint": "^7.6.0",
"eslint-plugin-import": "2.22.1",
"eslint-plugin-jsdoc": "30.7.6",
"eslint-plugin-prefer-arrow": "1.2.2",
"jasmine-core": "~3.8.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.3.2",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"typescript": "~4.2.4"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-statusbar": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-ionic-webview": {
"ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27. "
},
"cordova-plugin-ionic-keyboard": {},
"cordova-plugin-androidx-adapter": {},
"cordova-plugin-googlemaps": {
"API_KEY_FOR_ANDROID": "AIzaSyAmF3zBxA2VqPJzgMNhYt5HKvy2BKw1f1U",
"API_KEY_FOR_IOS": "AIzaSyAmF3zBxA2VqPJzgMNhYt5HKvy2BKw1f1U"
}
},
"platforms": [
"android"
]
}
}
src/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Ionic App</title>
<base href="/" />
<meta name="color-scheme" content="light dark" />
<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" />
<link rel="icon" type="image/png" href="assets/icon/favicon.png" />
<!-- 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" />
</head>
<body>
<app-root></app-root>
</body>
<script async
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAmF3zBxA2VqPJzgMNhYt5HKvy2BKw1f1U">
</script>
</html>
home.page.html
<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>
Blank
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<div id="map_canvas"></div>
</ion-content>
home.page.ts
import { Component, OnInit } from '@angular/core';
import { ToastController, Platform } from '@ionic/angular';
import {
GoogleMaps,
GoogleMap,
GoogleMapsEvent,
Marker,
GoogleMapsAnimation,
MyLocation,
} from '@ionic-native/google-maps';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {
map: GoogleMap;
address: string;
constructor(public toastCtrl: ToastController, private platform: Platform) {}
async ngOnInit() {
// Since ngOnInit() is executed before `deviceready` event,
// you have to wait the event.
await this.platform.ready();
this.loadMap();
}
loadMap() {
this.map = GoogleMaps.create('map_canvas', {
camera: {
target: {
lat: 43.0741704,
lng: -89.3809802
},
zoom: 18,
tilt: 30
}
});
// this.goToMyLocation();
}
goToMyLocation() {
this.map.clear();
// Get the location of you
this.map
.getMyLocation()
.then((location: MyLocation) => {
console.log(JSON.stringify(location, null, 2));
// Move the map camera to the location with animation
this.map.animateCamera({
target: location.latLng,
zoom: 17,
duration: 5000,
});
//add a marker
let marker: Marker = this.map.addMarkerSync({
title: '@ionic-native/google-maps plugin!',
snippet: 'This plugin is awesome!',
position: location.latLng,
animation: GoogleMapsAnimation.BOUNCE,
});
//show the infoWindow
marker.showInfoWindow();
//If clicked it, display the alert
marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(() => {
this.showToast('clicked!');
});
this.map.on(GoogleMapsEvent.MAP_READY).subscribe((data) => {
console.log('Click MAP', data);
});
})
.catch((err) => {
//this.loading.dismiss();
this.showToast(err.error_message);
});
}
async showToast(message: string) {
let toast = await this.toastCtrl.create({
message: message,
duration: 2000,
position: 'middle',
});
toast.present();
}
}
As soon as updated cordova to version 10.0.0. My map view is just blank. No error is being thrown. I am sharing the Ionic info and dependency list below. I have tried creating a new API ke and adding it to the app nothing is working.
CodePudding user response：
There is still an ongoing issue about the ionic native google maps in Cordova 10. As per the github ticket the issue is:
It's not related to your target Android version. It's cause by change from 4.0.x to 4.1.x of AGP (Android Gradle Plugin) Prior to AGP 4.1. , assert keyword was not enforced.
Latest Cordova-Android started using AGP 4.1. , which is causing the AssertionError
Please refer to this link for the github issue.
There is an unofficial fix you can try which is not yet merged to the mapsplugin:master branch. You can read from this link. You can try and fork the repo but note that the fix is not intended for production usage as per the author.
Please note my fork is not intended for production usage.
That said, there shouldn't be any changes related to map markers in the fork.
If you find the issue. Feel free to suggest a PR