Cordova-plugin-googlemaps: Map is breaking if i move from one page and go back to it.
I'm submitting a ... (check one with "x")
- [x] question
- [ X ] any problem or bug report
- [x] feature request
If you choose 'problem or bug report', please select OS: (check one with "x")
- [ ] Android
- [ X ] iOS
cordova information: (run $> cordova plugin list)
com.googlemaps.ios 2.5.0 "Google Maps SDK for iOS"
cordova-plugin-actionsheet 2.3.3 "ActionSheet"
cordova-plugin-apprate 1.3.0 "AppRate"
cordova-plugin-browsertab 0.2.0 "cordova-plugin-browsertab"
cordova-plugin-calendar 5.0.0 "Calendar"
cordova-plugin-compat 1.2.0 "Compat"
cordova-plugin-device 2.0.1 "Device"
cordova-plugin-dialogs 2.0.1 "Notification"
cordova-plugin-facebook4 1.9.1 "Facebook Connect"
cordova-plugin-firebase 0.1.25 "Google Firebase Plugin"
cordova-plugin-geolocation 4.0.1 "Geolocation"
cordova-plugin-globalization 1.0.9 "Globalization"
cordova-plugin-googlemaps 2.2.2 "cordova-plugin-googlemaps"
cordova-plugin-headercolor 1.0 "HeaderColor"
cordova-plugin-inappbrowser 2.0.2 "InAppBrowser"
cordova-plugin-ionic-webview 1.1.16 "cordova-plugin-ionic-webview"
cordova-plugin-nativestorage 2.2.2 "NativeStorage"
cordova-plugin-network-information 2.0.1 "Network Information"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-statusbar 2.4.1 "StatusBar"
cordova-plugin-whitelist 1.3.3 "Whitelist"
cordova-plugin-x-socialsharing 5.2.1 "SocialSharing"
es6-promise-plugin 4.1.0 "Promise"
ionic-plugin-keyboard 2.2.1 "Keyboard"
uk.co.workingedge.phonegap.plugin.launchnavigator 4.1.3 "Launch Navigator"
If you use @ionic-native/google-maps, please tell the package.json (only @ionic-native/core and @ionic-native/google-maps are fine mostly)
"@angular/common": "5.2.3",
"@angular/compiler": "5.2.3",
"@angular/compiler-cli": "5.2.3",
"@angular/core": "5.2.3",
"@angular/forms": "5.2.3",
"@angular/http": "5.2.3",
"@angular/platform-browser": "5.2.3",
"@angular/platform-browser-dynamic": "5.2.3",
"@ionic-native/app-rate": "4.5.3",
"@ionic-native/browser-tab": "4.5.3",
"@ionic-native/calendar": "4.5.3",
"@ionic-native/core": "4.5.3",
"@ionic-native/facebook": "^4.5.3",
"@ionic-native/firebase": "4.5.3",
"@ionic-native/geolocation": "4.5.3",
"@ionic-native/google-maps": "4.5.3",
"@ionic-native/header-color": "4.5.3",
"@ionic-native/in-app-browser": "^4.5.3",
"@ionic-native/launch-navigator": "4.5.3",
"@ionic-native/native-storage": "4.5.3",
"@ionic-native/network": "4.5.3",
"@ionic-native/social-sharing": "4.5.3",
"@ionic-native/splash-screen": "4.5.3",
"@ionic-native/status-bar": "4.5.3",
"@ionic/cli-utils": "^1.19.1",
"@ionic/pro": "1.0.17",
"@ionic/storage": "2.1.3",
"cordova-ios": "4.5.4",
"cordova-plugin-actionsheet": "^2.3.3",
"cordova-plugin-add-swift-support": "^1.7.1",
"cordova-plugin-apprate": "^1.3.0",
"cordova-plugin-browsertab": "^0.2.0",
"cordova-plugin-calendar": "^5.0.0",
"cordova-plugin-compat": "^1.2.0",
"cordova-plugin-device": "^2.0.1",
"cordova-plugin-dialogs": "^2.0.1",
"cordova-plugin-facebook4": "^1.9.1",
"cordova-plugin-firebase": "^0.1.25",
"cordova-plugin-geolocation": "^4.0.1",
"cordova-plugin-globalization": "^1.0.9",
"cordova-plugin-googlemaps": "^2.2.2",
Current behavior:
Everything works fine in this last update, but once I move from the root page (with the map) to another page and come back to it, the map is no longer there. It only shows up again when I setRoot(home.html).
Expected behavior:
The map was working just fine before this new update.
Screen capture or video record:
Related code, data or error log (please format your code or data):
// Load map
let map = GoogleMaps.create(element, mapOptions);
map.one(GoogleMapsEvent.MAP_READY).then(() => {
map.getMyLocation().then((location) => {
// zoom original: 15
map.animateCamera({
'target': { 'lat': location.latLng.lat, 'lng': location.latLng.lng },
'tilt': 0,
'zoom': 12,
'bearing': 0,
'duration': 1000
})
}).catch();
// Place the markers --------------------------------------------------------------------------------------------
env.lojasSnap.forEach((element, index) => {
let htmlInfoWindow = new HtmlInfoWindow();
let frame: HTMLElement = document.createElement('div');
frame.innerHTML = [
'<div style="width:auto; min-width:190px; max-width:260px; text-align:center; padding: 3px"><b>',
element.nome,
'<hr>',
'</b>',
element.snippet,
'<br>',
'<small>Clique para ver ofertas</small></div>'
].join("");
frame.getElementsByTagName("div")[0].addEventListener("click", () => {
let env = this;
env.mapa.getMyLocation().then((location) => {
env.temLoc = true;
var networkState = navigator.connection.type;
var states = {};
states[Connection.NONE] = 'SemNet';
if (states[networkState] == 'SemNet') {
let alerta = this.alertCtrl.create({
title: 'Oops!',
message: 'Parece que voc锚 n茫o est谩 conectado(a) 脿 internet. <br>Verifique sua conex茫o e tente novamente.',
buttons: [
{
text: 'Ok',
handler: () => {
}
}
],
enableBackdropDismiss: false
});
alerta.present();
// Se tiver internet...
} else {
if (element.numOfertas == 0) {
let toastSemOf = env.toastCtrl.create({
message: 'Esta vitrine n茫o possui ofertas. 馃槥',
position: 'bottom',
duration: 3000,
cssClass: 'toastCSS'
});
toastSemOf.present();
} else {
// Vai pra p谩gina da loja
env.navCtrl.push(LojistaPage, {
'id': element.id
})
}
}
}).catch(() => {
env.temLoc = false;
env.naoTemLoc();
})
});
htmlInfoWindow.setContent(frame);
map.addMarker({
position: {
lat: element.lat,
lng: element.lng
},
icon: {
url: "./assets/marker.png",
size: { width: 24, height: 34 }
}
}).then((marker) => {
// Abrir info window on click
marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(() => {
htmlInfoWindow.open(marker);
map.on(GoogleMapsEvent.MAP_DRAG_START).subscribe(() => {
htmlInfoWindow.close();
});
});
}
)
});
});
env.loadMapa = true;
env.spinner.checkLoad(env.loadSearch, env.loadQtdClasses, env.loadInformativos, env.loadLojas, env.loadMapa, true);
// Instancia o mapa
env.mapa = map;
// Pega a localiza莽茫o e move a camera para ela.
map.setClickable(true);
map.clear()
thezakman
All 18 comments
In order to reproduce your issue, please share your project files on github instead of pasting your code
wf9a5m75
on 5 Feb 2018
Uploading it to bitbucket, @wf9a5m75 what is your e-mail to add you to the project repository?
https://bitbucket.org/TheZakMan/cheeper-mapcrashing/overview
thezakman
on 5 Feb 2018
Check this page.
https://github.com/wf9a5m75
wf9a5m75
on 5 Feb 2018
You need to execute this.map.setDiv() when you leave the map page,
then you need to execute this.map.setDiv(mapDiv) when you come back to the map page.
good example:
https://github.com/simetin/reusable-map/blob/master/src/pages/home/home.ts
wf9a5m75
on 5 Feb 2018
Thank you for the quick answer and great plugin @wf9a5m75 !
thezakman
on 5 Feb 2018
You are welcome
wf9a5m75
on 5 Feb 2018
I saw that you added new controls into the maps, but I've got errors while building it.
Am I doing something wrong?
this are the controls i'm using in my map:
controls: {
compass: true,
myLocationButton: true,
myLocation: true,
indoorPicker: false,
zoom: false,
mapToolbar: false
},
and this is the console log:
[02:49:35] typescript: src/pages/home/home.ts, line: 294
Type '{ camera: { 'target': { lat: number; lng: number; }; 'tilt': number; 'zoom': number; 'bearing': n...'
is not assignable to type 'GoogleMapOptions'. Types of property 'controls' are incompatible. Type '{
compass: boolean; myLocationButton: boolean; myLocation: boolean; indoorPicker: boolean; zoom: ...' is not
assignable to type '{ compass?: boolean; myLocationButton?: boolean; indoorPicker?: boolean; mapToolbar?:
boolean; zo...'. Object literal may only specify known properties, and 'myLocation' does not exist in type
'{ compass?: boolean; myLocationButton?: boolean; indoorPicker?: boolean; mapToolbar?: boolean; zo...'.
L293: myLocationButton: true,
L294: myLocation: true,
L295: indoorPicker: false,
I haven't submitted the new code to the ionic repo yet. Thus, you need to build and install from my repo.
wf9a5m75
on 6 Feb 2018
Sorry for the dumb question, but how do I install from your repo @wf9a5m75?
$ npm install --save @ionic-native/core@latest @ionic-native/google-maps@latest
I was going to build a release for Apple Store today, should I wait for you to submit to ionic repo or downgrade the plugin?
thezakman
on 6 Feb 2018
wf9a5m75
on 6 Feb 2018
After installing your repo i'm getting a error when i get back to the map.
Uncought (in promise): TypeError: undefined is not an object (evaluating 'map.one')
Please commit all files including node_modules and plugins directories.
I will check it tomorrow.
wf9a5m75
on 7 Feb 2018
And you should explain
- which file is the problem
- how to reproduce (rare issue or regular issue?)
- screen record
And how did you debug? You can build the @ionic-native/google-maps from my repo now, so you should debug by yourself at least.
There is one() method.
https://github.com/wf9a5m75/ionic-native/blob/master/src/%40ionic-native/plugins/google-maps/index.ts#L1093
I don't prefer the person who is only help me.
You should do your best.
wf9a5m75
on 7 Feb 2018
Sorry, for all the questions.
I will upload and try to debug it my self.
thanks!
thezakman
on 7 Feb 2018
After as much as you can do your best, but you can't still resolve the problem, then you can ask me. I will help you.
wf9a5m75
on 7 Feb 2018
Solved, thank you for all the support and sorry for bothering you!
thezakman
on 8 Feb 2018
Sounds nice for solving the problem!
wf9a5m75
on 8 Feb 2018
Related issues
christoph-puppe
路
5Comments
ebellempire
路
3Comments
battika
路
4Comments
sebagon
路
4Comments
bigbossmaher
路
3Comments
Most helpful comment
You need to execute
this.map.setDiv()when you leave the map page,then you need to execute
this.map.setDiv(mapDiv)when you come back to the map page.good example:
https://github.com/simetin/reusable-map/blob/master/src/pages/home/home.ts