Ionic blank page instead of map

I’m submitting a … (check one with “x”) [ ] question [X ] any problem or bug report [ ] feature request

The plugin version: (check one with “x”) [ ] 2.0-beta3 (github) [ X] 2.0 (npm)

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

cordova information: (run $> cordova plugin list)

com.googlemaps.ios 2.4.0 "Google Maps SDK for iOS"
cordova-plugin-actionsheet 2.3.3 "ActionSheet"
cordova-plugin-add-swift-support 1.7.0 "AddSwiftSupport"
cordova-plugin-camera 2.4.1 "Camera"
cordova-plugin-compat 1.1.0 "Compat"
cordova-plugin-console 1.0.5 "Console"
cordova-plugin-device 1.1.4 "Device"
cordova-plugin-dialogs 1.3.3 "Notification"
cordova-plugin-fcm 2.1.2 "FCMPlugin"
cordova-plugin-geolocation 2.4.3 "Geolocation"
cordova-plugin-googlemaps 2.0.11 "cordova-plugin-googlemaps"
cordova-plugin-nativegeocoder 2.0.2 "NativeGeocoder"
cordova-plugin-nativestorage 2.2.2 "NativeStorage"
cordova-plugin-network-information 1.3.3 "Network Information"
cordova-plugin-splashscreen 4.0.2 "Splashscreen"
cordova-plugin-statusbar 2.2.1 "StatusBar"
cordova-plugin-whitelist 1.3.2 "Whitelist"
cordova-plugin-x-toast 2.6.0 "Toast"
cordova-sqlite-storage 2.0.4 "Cordova sqlite storage plugin"
cordova.plugins.diagnostic 3.7.1 "Diagnostic"
ionic-plugin-keyboard 2.2.1 "Keyboard"
uk.co.workingedge.phonegap.plugin.launchnavigator 4.0.5 "Launch Navigator"

If you use @ionic-native/google-maps, please show me the package.json This is my package.json

{
  "name": "Customer",
  "version": "1.0.0",
  "author": "",
  "homepage": "",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "config": {
    "ionic_webpack": "./webpack.config.js"
  },
  "dependencies": {
    "@angular/common": "4.0.2",
    "@angular/compiler": "4.0.2",
    "@angular/compiler-cli": "4.0.2",
    "@angular/core": "4.0.2",
    "@angular/forms": "4.0.2",
    "@angular/http": "4.0.2",
    "@angular/platform-browser": "4.0.2",
    "@angular/platform-browser-dynamic": "4.0.2",
    "@ionic-native/background-geolocation": "^4.2.1",
    "@ionic-native/camera": "^4.2.1",
    "@ionic-native/core": "^4.3.2",
    "@ionic-native/diagnostic": "^4.3.1",
    "@ionic-native/fcm": "^4.3.1",
    "@ionic-native/geolocation": "^4.3.1",
    "@ionic-native/google-maps": "^4.3.2",
    "@ionic-native/local-notifications": "^4.3.1",
    "@ionic-native/native-geocoder": "^4.3.1",
    "@ionic-native/native-storage": "^4.3.1",
    "@ionic-native/network": "^4.3.1",
    "@ionic-native/splash-screen": "^3.6.1",
    "@ionic-native/sqlite": "^4.3.1",
    "@ionic-native/status-bar": "^3.6.1",
    "@ionic-native/toast": "^4.3.1",
    "@ionic/cloud-angular": "^0.12.0",
    "@ionic/storage": "2.0.1",
    "@types/google-maps": "^3.2.0",
    "angular2-uuid": "^1.1.1",
    "cordova-android": "^6.2.3",
    "cordova-plugin-actionsheet": "^2.3.3",
    "cordova-plugin-camera": "^2.4.1",
    "cordova-plugin-compat": "^1.1.0",
    "cordova-plugin-console": "1.0.5",
    "cordova-plugin-device": "1.1.4",
    "cordova-plugin-dialogs": "^1.3.3",
    "cordova-plugin-fcm": "^2.1.2",
    "cordova-plugin-geolocation": "^2.4.3",
    "cordova-plugin-googlemaps": "^2.0.11",
    "cordova-plugin-nativegeocoder": "^2.0.2",
    "cordova-plugin-nativestorage": "^2.2.2",
    "cordova-plugin-network-information": "^1.3.3",
    "cordova-plugin-splashscreen": "^4.0.3",
    "cordova-plugin-statusbar": "^2.2.3",
    "cordova-plugin-whitelist": "^1.3.2",
    "cordova-plugin-x-toast": "^2.6.0",
    "cordova-sqlite-storage": "^2.0.4",
    "cordova.plugins.diagnostic": "^3.7.1",
    "creditcards": "^2.1.2",
    "ionic-angular": "3.1.1",
    "ionic-plugin-keyboard": "~2.2.1",
    "ionic2-rating": "^1.2.2",
    "ionicons": "3.0.0",
    "nativescript-plugin-firebase": "^4.1.1",
    "rxjs": "5.1.1",
    "sockjs-client": "^1.1.4",
    "stompjs": "^2.3.3",
    "sw-toolbox": "3.4.0",
    "uk.co.workingedge.phonegap.plugin.launchnavigator": "^4.0.5",
    "zone.js": "^0.8.10"
  },
  "devDependencies": {
    "@ionic/app-scripts": "^2.1.4",
    "typescript": "~2.2.1",
    "webpack-merge": "^4.1.0"
  },
  "cordovaPlugins": [
    "cordova-plugin-whitelist",
    "cordova-plugin-console",
    "cordova-plugin-statusbar",
    "cordova-plugin-device",
    "cordova-plugin-splashscreen",
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": [],
  "description": "Full tasking",
  "cordova": {
    "plugins": {
      "cordova-plugin-console": {},
      "cordova-plugin-device": {},
      "ionic-plugin-keyboard": {},
      "cordova-plugin-x-toast": {},
      "cordova-sqlite-storage": {},
      "cordova-plugin-whitelist": {},
      "cordova-plugin-camera": {
        "CAMERA_USAGE_DESCRIPTION": " ",
        "PHOTOLIBRARY_USAGE_DESCRIPTION": " "
      },
      "cordova-plugin-geolocation": {
        "GEOLOCATION_USAGE_DESCRIPTION": ""
      },
      "cordova-plugin-network-information": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-nativestorage": {},
      "uk.co.workingedge.phonegap.plugin.launchnavigator": {},
      "cordova-plugin-nativegeocoder": {},
      "cordova.plugins.diagnostic": {},
      "cordova-plugin-fcm": {},
      "cordova-plugin-googlemaps": {
        "API_KEY_FOR_ANDROID": "",
        "API_KEY_FOR_IOS": ""
      }
    },
    "platforms": [
      "android"
    ]
  }
}

Current behavior:

The applications shows a blank image instead of map, this start happens when I update the plugin, I was using: “cordova-plugin-googlemaps”: “1.4.5”, and after update the map does not show in my app

Steps to reproduce:

Screen capture or video record:

This is my ionic info

cli packages: (/home/dev06/.nvm/versions/node/v6.7.0/lib/node_modules)

    @ionic/cli-utils  : 1.14.0
    ionic (Ionic CLI) : 3.14.0

global packages:

    cordova (Cordova CLI) : 7.0.1 

local packages:

    @ionic/app-scripts : 2.1.4
    Cordova Platforms  : android 6.2.3
    Ionic Framework    : ionic-angular 3.1.1

System:

    Android SDK Tools : 26.1.1
    Node              : v6.7.0
    npm               : 4.6.1 
    OS                : Linux 3.13

Misc:

    backend : pro

[wf9a5m75]

I have one update. I notice that this occurs in particular case.

---

scenario

Your app has multiple pages, for example pageA and pageB. Then there is a <div id="map_canvas"> in both pages.

When you move from pageA to pageB, you try to create a map for pageB with like this code.

ionViewDidLoad() => {
   let mapDiv = document.getElementById('map_div');
   this.map = this.googleMaps.create(mapDiv);
}

Looks like fine, but did you confirm the document.getElementById('map_div') return really the map div in pageB?

Probably you didn’t.

Actually document.getElementById('map_div') returns the <div id="map_canvas"> of pageA.

The reason is the ionic framework uses fade-in/out when changing the pages.

That’s why there are two <div id="map_canvas"> at the same time in particular time, and the code specify to old div. Then the plugin creates a map instance at once, but the target div is already gone, so the plugin removes the map automatically.

That’s why you get white page (if you are in the same situation).

---

There are two solutions:

solution 1: Insert setTimeout()

As I suggested before, setTimeout() is the easiest way. Because the fade-in/out finish in 1,000ms typically (sometimes no).

ionViewDidLoad() => {
  setTimeout(this.loadMap.bind(this), 1000);
}

loadMap() => {
   let mapDiv = document.getElementById('map_div');
   this.map = this.googleMaps.create(mapDiv);
}

solution 2: specify the ID of the map_div

Using this PR and the multiple_maps branch code, you can write like this:

ionViewDidLoad() => {
   this.map = this.googleMaps.create('map_canvas');
}

The wrapper plugin waits until the map_canvas in pageB is ready.

If you want to try the solution 2, you need to reinstall the plugins.

$> git clone https://github.com/wf9a5m75/ionic-native

$> cd ionic-native

$> node -v
7.10

$> npm run build google-maps

$> cd (your project folder)

$> npm uninstall @ionin-native/core @ionic-native/google-maps

$> npm install (path to)/ionic-native/dist/\@ionic-native/core

$> npm install (path to)/ionic-native/dist/\@ionic-native/google-maps

$> cordova plugin add https://github.com/mapsplugin/cordova-plugin-googlemaps#multiple_maps --variable API_KEY_FOR_ANDROID=...

[wf9a5m75]

Well, no one share your code on githubn, I can not give you any helps.

The most common mistake is your too faster to create the map view.

You have to wait the ionViewEntered() at least. And if you use the live reload, inserting the setTimeout() is better because platform.ready() is slow.

ionViewEnter() {
  setTimeout(this.loadMap.bind(this), 1000);
}

And you should try to run your app without the live reload before using the live reload. That’s ionic trick.