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”)
- question
- [ X ] any problem or bug report
- 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()
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Comments: 18 (10 by maintainers)
You need to execute
this.map.setDiv()when you leave the map page, then you need to executethis.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
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.
Check this page. https://github.com/wf9a5m75