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()

[wf9a5m75]

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]

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.