cordova-plugin-googlemaps: [bug] BUG: Loading Map again crashes with message that map already exists.

I’m submitting a … (check one with “x”) [ x ] bug report

If you choose ‘problem or bug report’, please select OS: (check one with “x”) [ x ] Android

cordova information: (run $> cordova plugin list)

cordova-plugin-compat 1.0.0 "Compat"
cordova-plugin-console 1.0.5 "Console"
cordova-plugin-device 1.1.4 "Device"
cordova-plugin-geolocation 2.4.3 "Geolocation"
cordova-plugin-googlemaps 2.1.1 "cordova-plugin-googlemaps"
cordova-plugin-inappbrowser 1.7.1 "InAppBrowser"
cordova-plugin-network-information 1.3.3 "Network Information"
cordova-plugin-request-location-accuracy 2.2.2 "Request Location Accuracy"
cordova-plugin-splashscreen 4.0.3 "Splashscreen"
cordova-plugin-statusbar 2.2.2 "StatusBar"
cordova-plugin-uniquedeviceid 1.3.2 "UniqueDeviceID"
cordova-plugin-whitelist 1.3.1 "Whitelist"
cordova-sqlite-storage 2.0.4 "Cordova sqlite storage plugin"
cordova.plugins.diagnostic 3.6.8 "Diagnostic"
ionic-plugin-keyboard 2.2.1 "Keyboard"
onesignal-cordova-plugin 2.2.1 "OneSignal Push Notifications"

If you use @ionic-native/google-maps, please tell the package.json (only @ionic-native/core and @ionic-native/google-maps are fine mostly)

 "@ionic-native/core": "^4.4.0",
 "@ionic-native/diagnostic": "^4.4.0",
 "@ionic-native/geolocation": "^4.4.0",
 "@ionic-native/google-maps": "^4.4.0",

Current behavior:

When loading map page from menu it crashes , with error message

console.error: GoogleMaps DIV[__pluginMapId='map_0_1171669735998'] has already map.

Expected behavior:

It should load map

Screen capture or video record:

capture

Related code, data or error log (please format your code or data):

Menu Item load map code

this.nav.setRoot(MainPage);

Variables

 map: GoogleMap;
 mapElement: HTMLElement;
 map_id = "map";

Code for creating map

 this.mapElement = document.getElementById(this.map_id);
      /*
      * @comment: Initial configuration for map pointing central brunch
      * */
      let mapOptions: GoogleMapOptions = {
        controls: {
          compass: false,
          myLocationButton: false,
          indoorPicker: false,
          mapToolbar: false
        },
        camera: {
          target: {
            lat: 40.1817318,
            lng: 44.5122556
          },
          zoom: 8
        },
        styles: [{
          stylers: [{
            saturation: -100
          }]
        }]
      };
      /*
      * @comment: Creating google map
      * */
      if (!this.map) {

        this.map = GoogleMaps.create(this.mapElement, mapOptions);
      }

Suggest

Create static method to destroy map object or resset

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 57 (27 by maintainers)

Most upvoted comments

Okay, I got the reason of GoogleMaps DIV[__pluginMapId='map_0_1171669735998'] has already map..

Because you write your code like this:

this.mapElement = document.getElementById('map-main-page');
if (!this.map) {
  this.map = GoogleMaps.create(this.mapElement, mapOptions);
}

The ionic framework uses fade-in and fade-out when you change the pages, even accessing to the same page. In your case, for changing language, the ionic regenerates new DOM tree.

So if there is the same div tag in pageA(Eng page) and pageB(Rus page), can you image what happens?

this.mapElement = document.getElementById('map-main-page');

This code returns the div of pageA, because it is still remained during the fading out. So the <div id="map-main-page"> is still remained, that’s why the plugin outputs the error GoogleMaps DIV[__pluginMapId='map_0_1171669735998'] has already map.. But very after, the element is removed. That’s why the plugin remove the map automatically. Then you get a blank page.

For the reason, I recommend to use this way for ionic users. https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v2.0.0/ReleaseNotes/ionic-googlemaps-4.3.3/README.md#update-specifying-element-id-for-mapcreate

if (!this.map) {
  this.map = GoogleMaps.create('map-main-page', mapOptions);
}

Since @ionic-native/google-maps@4.3.0, the wrapper plugin waits the specified ID element is loaded. This prevents this problem.

issue_1890

wf9a5m75 on Nov 17, 2017