Freeze after pushing to other page, and going back to map page

[chris087]

I'm submitting a ... (check one with "x")

• [ ] question
• [*] any problem or bug report
• [ ] feature request

If you choose 'problem or bug report', please select OS: (check one with "x")

• [ ] Android
• [*] iOS
• [ ] Browser

cordova information: (run $> cordova plugin list)

cordova plugin ls cordova-plugin-advanced-http 2.0.1 "Advanced HTTP plugin" cordova-plugin-console 1.1.0 "Console" cordova-plugin-device 2.0.2 "Device" cordova-plugin-dialogs 2.0.1 "Notification" cordova-plugin-facebook4 3.0.0 "Facebook Connect" cordova-plugin-file 6.0.1 "File" cordova-plugin-googlemaps 2.4.6 "cordova-plugin-googlemaps" cordova-plugin-ionic-keyboard 2.1.3 "cordova-plugin-ionic-keyboard" cordova-plugin-ionic-webview 2.2.0 "cordova-plugin-ionic-webview" 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)

Current behavior:

The page with the map on it freezes when returning from a (< BACK) action. I can reload the map, by going to the menu -> home, then going to the map page again. it loads all the markers again, but cannot move, or zoom on the map.. (need to restart app).

This is the errorlog in xcode:

2018-10-17 10:12:49.150380+0200 EasyFysio[462:34224] **** LOAD MAP ........ *** 2018-10-17 10:12:49.258303+0200 EasyFysio[462:34224] CDVWKWebViewEngine: handleStopScroll 2018-10-17 10:12:49.483824+0200 EasyFysio[462:34224] ERROR: Plugin 'map_2_1273820730957' not found, or is not a CDVPlugin. Check your plugin mapping in config.xml. 2018-10-17 10:12:49.536905+0200 EasyFysio[462:34224] GLRenderTarget::CreateFramebuffer() failed.

Code

`import { Component } from '@angular/core'; import { IonicPage, NavController, NavParams, Platform } from 'ionic-angular';

import { PraktijkProvider } from '../../providers/praktijk/praktijk'; // custom service/provider; import { LoaderProvider } from '../../providers/loader/loader'; // custom service/provider;

import { GoogleMaps, GoogleMap, GoogleMapsEvent, GoogleMapOptions, MarkerOptions, Marker, HtmlInfoWindow } from '@ionic-native/google-maps';

import { PraktijkDetailsPage } from '../praktijk-details/praktijk-details';

@IonicPage() @Component({ selector: 'page-praktijken', templateUrl: 'praktijken.html', }) export class PraktijkenPage {

map: GoogleMap; mapIsLoaded: boolean = false;

constructor(public navCtrl: NavController, public navParams: NavParams, public loader: LoaderProvider, public platform: Platform, public praktijkProvider: PraktijkProvider) {

platform.ready().then(() => {
   console.log("*** Praktijkenpagina ready");

 });

}

ionViewDidLoad() { console.log('ionViewDidLoad PraktijkenPage');

}

ionViewDidEnter(){ console.log('ionViewDidEnter PraktijkenPage'); this.initMap(); }

initMap() { let lastView = this.navCtrl.last();

console.log("**** LAST VIEW: --- "+ lastView.name);

if (lastView.name == "PraktijkenPage") {
  console.log("**** DONT LOAD MAP ***");

} else {
  console.log("**** LOAD MAP ........ ***");
  this.loader.show("Locaties laden...");

  setTimeout( () => {
    this.loadMap();
  }, 220);

}

}

loadMap() {

let praktijken = this.praktijkProvider.praktijken;

let mapOptions: GoogleMapOptions = {
  camera: {
     target: {
       lat: 52.18958,
       lng: 5.29524
     },
     zoom: 7,
     tilt: 0
   }
};

this.map = GoogleMaps.create('map_canvas', mapOptions);

this.map.one(GoogleMapsEvent.MAP_READY).then(() => {

  this.loader.hide();

          for (let i = 0; i < praktijken.length; i++) {
              let praktijk = praktijken[i];

              let htmlInfoWindow = new HtmlInfoWindow();
              let frame: HTMLElement = document.createElement('div');

              frame.innerHTML = [
                '<div class="map-info-wrapper"><a href="#" class="map-close"><img src="assets/imgs/close.png"></a><h2 class="map-title">'+praktijk.title+'</h2>',
                '<div class="map-address">'+praktijk.address.straat+'<br>'+praktijk.address.postcode+' '+praktijk.address.plaats+'<br>Tel: <a class="phonenr" href="tel://'+praktijk.phone[0]+'">'+praktijk.phone[0]+'</a> </div>',
                '<div class="map-info-buttons"><a href="#" class="button-2 map-info-btn">Meer info</a> <div class="spacer"></div> <a href="tel://'+praktijk.phone[0]+'" class="button-2 button-3">Bel nu</a></div></div>'
              ].join("");

              htmlInfoWindow.setContent(frame, {width: "220px", height: "auto"});

              frame.getElementsByClassName("map-close")[0].addEventListener("click", () => {
                htmlInfoWindow.close();
              });  

              frame.getElementsByClassName("map-info-btn")[0].addEventListener("click", () => {
                this.navCtrl.push(PraktijkDetailsPage, { id: praktijk.id });
              });  

              var options: MarkerOptions = {

                icon: {
                  url: 'www/assets/imgs/marker.png',
                  size: {
                    width: 28,
                    height: 36
                  }
                },
                position: {lat: praktijk.meta.maplist_latitude, lng: praktijk.meta.maplist_longitude}
              };

              this.map.addMarker(options).then((marker: Marker) => {

                    marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(() => {
                      htmlInfoWindow.open(marker);
                    });

              });

          }

 });

}

}`