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

Created on 15 Nov 2017 · 57Comments · Source: mapsplugin/cordova-plugin-googlemaps

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

not bug

Source

ananmelkonyan

Most helpful comment

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/[email protected], the wrapper plugin waits the specified ID element is loaded. This prevents this problem.

issue_1890

wf9a5m75 on 17 Nov 2017

👍4

All 57 comments

Please share your project files on GitHub. I will check it tomorrow.

wf9a5m75 on 15 Nov 2017

I will create demo project and share with you thanks.

ananmelkonyan on 15 Nov 2017

Got failing loading in a new project the map

ananmelkonyan on 15 Nov 2017

what do you mean?

wf9a5m75 on 15 Nov 2017

It is not loading map on new project in the latest ionic, i will try to do some research upon this bug, when project ready i will post it here