Cordova-plugin-googlemaps: Map does not load on Android: Cannot read property 'insertAdjacentHTML' of null

[cpamp]

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

• [ ] question
• [x] any problem or bug report

OS: (check one with "x")

• [x] Android
• [ ] iOS
• [ ] Browser

cordova information: (run $> cordova plugin list)

cordova-plugin-device 2.0.2 "Device"
cordova-plugin-geolocation 4.0.1 "Geolocation"
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.1.4 "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)

@ionic-native/core : 4.15.0
@ionic-native/google-maps : 4.14.0 

Current behavior:

map does not load

Expected behavior:

map should load

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

Plugin fails on this line (https://github.com/mapsplugin/cordova-plugin-googlemaps/commit/bfb18137d08f050232854a162b6144e3eac2fd5e):

  document.body.insertAdjacentHTML('afterbegin', envTestDiv);

TypeError: Cannot read property 'insertAdjacentHTML' of null

[wf9a5m75]

What OS version do you use?

[cpamp]

I tried Android 9.0.0 and 7.0.0, both fail.

[wf9a5m75]

Please share your project files on Github, because document.body should not be null.
I think the problem is occurred on only your environment.
If this problem occurs on everybody, I should get this report more, but only from you so far.
Thus, I guess your project has this problem.

[cpamp]

Sorry, I think you're right. I recreated a blank project and moved all my code to that and the problem has gone away.

[cpamp]

I'm reopening this issue. Yes it is an issue. I think it qualifies as an issue because I am no longer the only one to report it and it has returned even on my new project without any code changes.

Please DO NOT close this issue until it is resolved. I will look into it and for now I think wrapping that entire section in a setTimeout works, but needs more testing.

[wf9a5m75]

I close this issue because you don't share the reproduce project files. No contribution, no help.

[wf9a5m75]

Can you read JavaScript code?

document.body.insertAdjacentHTML('afterbegin', envTestDiv);

https://github.com/mapsplugin/cordova-plugin-googlemaps/blob/d50dc31/www/pluginInit.js#L72

Then guess the reason from your error message

Cannot read property 'insertAdjacentHTML' of null

document.body is null?

This is not normal behavior. That's why I ask you share your project files.

Since this plugin is open source library, you have to contribute open source community.
Just crime is just a spam.

If you don't share the project files that reproduce your issue 100%, please find another plugin.

[cpamp]

I am looking into it and will submit a PR

Clearly I know where the message is coming from and why, as outlined above (maybe a second read?)

Just because you won't fix an issue does not mean it is not an issue and doesn't require fixing. Even if YOU won't fix it, someone else might.

[wf9a5m75]

Ok, I wait someone.

[chadevans]

I have a fix, needs testing, using observer to check for existence of document.body.

[chadevans]

I don't have a test environment to test right now, but in theory should work. From stack overflow, start at line 69 through end of section:

var envTestDiv = '<div id="envTest" style="margin-top:-99px;margin-top:constant(safe-area-inset-top);margin-top:env(safe-area-inset-top);position:absolute;z-index:-1;"></div>';

  (function() {
    "use strict";

    var observer = new MutationObserver(function() {
      if (document.body) {
        document.body.insertAdjacentHTML('afterbegin', envTestDiv);

        var testElement = document.getElementById('envTest');
        var computedStyles = window.getComputedStyle(testElement);
        var testResult = computedStyles.getPropertyValue('margin-top');

        document.body.removeChild(testElement);

        // if browser supports env() or constant(), returns a pixel value as string, even if 0px
        if (testResult != '-99px') {
          viewportTagContent += ', viewport-fit=cover';
        }

        // Update viewport tag attribute
        viewportTag.setAttribute('content', viewportTagContent);
        observer.disconnect();
      }
    });
    observer.observe(document.documentElement, {childList: true});
  })();

[cpamp]

That works, but we can't rely solely on the MutationObserver. If the body is already loaded, there is no guarantee that the document changes.

Tested on android 7 and 9, and iPhone 5s (simulated) and iPhone X (simulated).

I would submit a PR but github is having issues, I'll try again in the morning.

[chadevans]

We can check if document.body is null, if null then mutation observer, if exists just do test.

[chadevans]

@cpamp give this a try?

var envTestDiv = '<div id="envTest" style="margin-top:-99px;margin-top:constant(safe-area-inset-top);margin-top:env(safe-area-inset-top);position:absolute;z-index:-1;"></div>';

var test = function() {
  document.body.insertAdjacentHTML('afterbegin', envTestDiv);

  var testElement = document.getElementById('envTest');
  var computedStyles = window.getComputedStyle(testElement);
  var testResult = computedStyles.getPropertyValue('margin-top');

  document.body.removeChild(testElement);

  // if browser supports env() or constant(), returns a pixel value as string, even if 0px
  if (testResult != '-99px') {
    viewportTagContent += ', viewport-fit=cover';
  }

  // Update viewport tag attribute
  viewportTag.setAttribute('content', viewportTagContent);
}

var testWithMutationObserver = function() {
  var observer = new MutationObserver(function() {
    if (document.body) {
      test();
      observer.disconnect();
    }
  });
  observer.observe(document.documentElement, {childList: true});
}

if (document.body) {
  test();
} else {
  testWithMutationObserver();
}

[cpamp]

@chadevans I was testing with something similar to this on the devices listed above and it was working. However, I think this is over complicating the problem. We should always have document.head available, do you see any issues using this instead? Thoughts @wf9a5m75 ?

Note these commits: 57da061 44a8403

While testing I also found that when requesting a 3rd party library is when document.body is null, but only for the first load (I'm assuming because subsequent loads are cached). The issue is easily reproduced with a minimal project by just adding the plugin and requesting a library via CDN (e.g. bootstrap) in the head tag.

[wf9a5m75]

@chadevans I already changed the code. plugininit.js executes after document.body is ready.

[cpamp]

Fixed by 7ae660d

[pawangjain]

@chadevans I already changed the code. plugininit.js executes after document.body is ready.

Hello Masashi

Is this change available in the new upcoming version?

How should i update my 2.4.6 google map plugin version to use your code changes in plugininit.js?

Thanks.

[cpamp]

@pawangjain Use 2.4.4 until the next release.

[jeromediaz]

hope It can help, I encountered this one and fixes it by moving as the last js import.

[4-life]

@jeromediaz thanks man! You saved my life!