Ionic not getting a MAP_READY event

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

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

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

cordova information: (run $> cordova plugin list)

cordova-instagram-plugin 0.5.5 "Instagram"
cordova-plugin-app-version 0.1.9 "AppVersion"
cordova-plugin-camera 2.4.1 "Camera"
cordova-plugin-cocoapod-support 1.3.0 "Cordova CocoaPods Dependency Support"
cordova-plugin-compat 1.2.0 "Compat"
cordova-plugin-console 1.1.0 "Console"
cordova-plugin-crosswalk-webview 2.3.0 "Crosswalk WebView Engine"
cordova-plugin-device 1.1.6 "Device"
cordova-plugin-geolocation 2.4.3 "Geolocation"
cordova-plugin-googlemaps 2.0.11 "cordova-plugin-googlemaps"
cordova-plugin-inappbrowser 1.7.1 "InAppBrowser"
cordova-plugin-network-information 1.3.3 "Network Information"
cordova-plugin-splashscreen 4.0.3 "Splashscreen"
cordova-plugin-statusbar 2.2.3 "StatusBar"
cordova-plugin-vibration 2.1.5 "Vibration"
cordova-plugin-whitelist 1.3.2 "Whitelist"
cordova-plugin-wkwebview-engine 1.1.3 "Cordova WKWebView Engine"
cordova-sqlite-storage 2.0.4 "Cordova sqlite storage plugin"
cordova-universal-clipboard 0.1.0 "Clipboard"
ionic-plugin-keyboard 2.2.1 "Keyboard"
phonegap-plugin-push 2.1.0 "PushPlugin"

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

{
  "version": "0.0.1",
  "name": "xxxx",
  "author": "xxxxx",
  "homepage": "xxxxxx",
  "private": true,
  "description": "xxxxx",
  "license": "",
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build"
  },
  "dependencies": {
    "@ angular/common": "^4.4.6",
    "@ angular/compiler": "^4.4.6",
    "@ angular/compiler-cli": "^4.4.6",
    "@ angular/core": "^4.4.6",
    "@ angular/forms": "^4.4.6",
    "@ angular/http": "^4.4.6",
    "@ angular/platform-browser": "^4.4.6",
    "@ angular/platform-browser-dynamic": "^4.4.6",
    "@ angular/platform-server": "^4.4.6",
    "@ angular/tsc-wrapped": "^4.4.6",
    "@ ionic-native/app-version": "^4.3.2",
    "@ ionic-native/camera": "^4.3.2",
    "@ ionic-native/core": "^4.3.2",
    "@ ionic-native/device": "^4.3.2",
    "@ ionic-native/geolocation": "^4.3.2",
    "@ ionic-native/google-maps": "^4.3.2",
    "@ ionic-native/in-app-browser": "^4.3.2",
    "@ ionic-native/instagram": "^4.3.2",
    "@ ionic-native/keyboard": "^4.3.2",
    "@ ionic-native/network": "^4.3.2",
    "@ ionic-native/push": "^4.3.2",
    "@ ionic-native/splash-screen": "^4.3.2",
    "@ ionic-native/sqlite": "^4.3.2",
    "@ ionic-native/status-bar": "^4.3.2",
    "@ ionic-native/vibration": "^4.3.2",
    "@ ionic/app-scripts": "~2.1.4",
    "@ ionic/storage": "^2.0.1",
    "aes-js": "^3.1.0",
    "async": "^2.5.0",
    "bootstrap": "^3.3.7",
    "bootstrap-sass": "^3.3.7",
    "cordova-android": "~6.3.0",
    "cordova-browser": "^5.0.1",
    "cordova-instagram-plugin": "^0.5.5",
    "cordova-ios": "~4.5.2",
    "cordova-plugin-app-version": "^0.1.9",
    "cordova-plugin-camera": "^2.4.1",
    "cordova-plugin-cocoapod-support": "^1.3.0",
    "cordova-plugin-compat": "^1.2.0",
    "cordova-plugin-console": "^1.1.0",
    "cordova-plugin-crosswalk-webview": "^2.3.0",
    "cordova-plugin-device": "^1.1.6",
    "cordova-plugin-geolocation": "^2.4.3",
    "cordova-plugin-googlemaps": "^2.0.11",
    "cordova-plugin-inappbrowser": "^1.7.1",
    "cordova-plugin-network-information": "^1.3.3",
    "cordova-plugin-splashscreen": "^4.0.3",
    "cordova-plugin-statusbar": "^2.2.3",
    "cordova-plugin-vibration": "^2.1.5",
    "cordova-plugin-whitelist": "^1.3.2",
    "cordova-plugin-wkwebview-engine": "^1.1.3",
    "cordova-sqlite-storage": "^2.0.4",
    "cordova-universal-clipboard": "git+https://github.com/Visigo/CordovaClipboard.git",
    "dateformat": "^3.0.2",
    "es6-promise-plugin": "git+https://github.com/vstirbu/PromisesPlugin.git",
    "font-awesome": "^4.7.0",
    "geodesy": "^1.1.2",
    "ion-multi-picker": "^2.1.2",
    "ionic-angular": "^3.7.1",
    "ionic-plugin-keyboard": "^2.2.1",
    "ionicons": "3.0.0",
    "localforage": "^1.5.2",
    "ng2-bootstrap": "^1.6.3",
    "ng2-validation": "^4.2.0",
    "phonegap-plugin-push": "^2.1.0",
    "rxjs": "^5.5.1",
    "signalr": "^2.2.2",
    "stacktrace-js": "^2.0.0",
    "sw-toolbox": "3.6.0",
    "typescript": "~2.4.2",
    "zone.js": "^0.8.18"
  },
  "devDependencies": {
    "@ types/jasmine": "^2.6.0",
    "@ types/node": "^8.0.46",
    "angular2-template-loader": "^0.6.2",
    "elementtree": "^0.1.7",
    "fs-extra": "^4.0.2",
    "html-loader": "^0.5.1",
    "ionic": "^3.14.0",
    "istanbul-instrumenter-loader": "^3.0.0",
    "jasmine": "^2.8.0",
    "jasmine-spec-reporter": "^4.2.1",
    "karma": "^1.7.1",
    "karma-chrome-launcher": "^2.2.0",
    "karma-coverage-istanbul-reporter": "^1.3.0",
    "karma-jasmine": "^1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-junit-reporter": "^1.2.0",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-tfs-reporter": "^1.0.1",
    "karma-webpack": "^2.0.5",
    "null-loader": "^0.1.1",
    "protractor": "^5.2.0",
    "ts-loader": "^3.0.5",
    "ts-node": "^3.3.0"
  },
  "cordovaPlugins": [],
  "cordovaPlatforms": [],
  "-vs-binding": {
    "BeforeBuild": [
      "ionic:build"
    ]
  },
  "config": {
    "ionic_bundler": "webpack",
    "ionic_generate_source_map": true,
    "ionic_source_map_type": "source-map",
    "ionic_copy": "./config/copy.config.js"
  },
  "cordova": {
    "plugins": {
      "cordova-plugin-console": {},
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-splashscreen": {},
      "ionic-plugin-keyboard": {},
      "cordova-plugin-inappbrowser": {},
      "cordova-plugin-crosswalk-webview": {
        "XWALK_VERSION": "23+",
        "XWALK_LITEVERSION": "xwalk_core_library_canary:17+",
        "XWALK_COMMANDLINE": "--disable-pull-to-refresh-effect",
        "XWALK_MODE": "embedded",
        "XWALK_MULTIPLEAPK": "true"
      },
      "cordova-plugin-device": {},
      "cordova-plugin-network-information": {},
      "cordova-plugin-geolocation": {
        "GEOLOCATION_USAGE_DESCRIPTION": "xxxxxxxx"
      },
      "cordova-plugin-wkwebview-engine": {},
      "cordova-plugin-app-version": {},
      "cordova-plugin-cocoapod-support": {},
      "cordova-plugin-vibration": {},
      "cordova-plugin-camera": {
        "CAMERA_USAGE_DESCRIPTION": "xxxxxxx",
        "PHOTOLIBRARY_USAGE_DESCRIPTION": "xxxxxx"
      },
      "phonegap-plugin-push": {
        "SENDER_ID": "451308312928"
      },
      "cordova-sqlite-storage": {},
      "cordova-plugin-googlemaps": {
        "API_KEY_FOR_ANDROID": "xxxxxxx",
        "API_KEY_FOR_IOS": "xxxxxx",
        "LOCATION_WHEN_IN_USE_DESCRIPTION": "Show your location on the map",
        "LOCATION_ALWAYS_USAGE_DESCRIPTION": "Trace your location on the map"
      },
      "cordova-instagram-plugin": {},
      "cordova-plugin-compat": {}
    },
    "platforms": [
      "android",
      "browser",
      "ios"
    ]
  }
}

Current behavoir: The application doesn’t receive a ‘MAP_READY’ event after the map has been created. Therefore not showing map in my application. I then want to app map points to display.

I have debugged the code below on a Mac and with Chrome in Windows. Following the console.log messages the I see: Creating courses map Courses map created

But never see Courses map ready fired

Screen capture or video record: This is my ionic info

cli:
    ionic (Ionic CLI) : 3.14.0
    cordova (Cordova CLI) : 7.1.0

local packages:
    @ionic/app-scripts : 2.1.4
    Cordova Platforms  : android 6.3.0, ios 4.5.2
    Ionic Framework    : ionic-angular 3.7.1

System:
    Android SDK Tools : 26.1.1
    Node              : v8.4.0
    npm               : 5.5.1 
    OS                : Windows 10

    Mac : 11.0.3
    Node              : v8.4.0
    npm               : 5.5.1 
    OS                : Mac

Code:

export class CoursesNearbyMapComponent implements OnInit {

  //Properties
  private googleMap: GoogleMap = null;
  private gpsCurrentPosition: GPSCurrentPosition = null;
  private htmlElement: HTMLElement = null;

  //Constructor
  constructor(private platform: Platform, public navCtrl: NavController, private geolocation: Geolocation, private googleMaps: GoogleMaps, private events: Events, config: AppConfiguration) {

    this.gpsCurrentPosition = new GPSCurrentPosition(this.geolocation, this.appconfig);
  }

  //On init
  ngOnInit(): void {}

  ionViewWillEnter(): void {

    this.platform.ready()
      .then(() => {

        //Get map element
        this.htmlElement = document.getElementById('map');

        //Load the map
        this.loadMap()
          .then(() => {

            this.ready()
              .then(() => {

              });
          })
          .catch((err) => {

            this.ready()
              .then((a) => {

                console.error('error: ' + err);

                //Go back
                this.navCtrl.pop();
              });
          });
      });
  }

  ionViewWillLeave(): void {

    //Clear out the view to make sure to save memory
    this.googleMap = null;
  }

  public loadMap(): Promise < boolean > {

    return new Promise < boolean > ((resolve, reject) => {

      //If not created yet
      if (this.googleMap == null) {

        if (this.appconfig.isDebugging()) {
          console.log('Creating courses map');
        }

        let location: LatLng = new LatLng(this.gpsCurrentPosition.latitude, this.gpsCurrentPosition.longitude);

        let mapOptions: GoogleMapOptions = {
          mapType: 'MAP_TYPE_ROADMAP',
          camera: {
            target: location,
            zoom: 11,
            tilt: 0,
            bearing: 0,
            duration: 5000
          },
          controls: {
            compass: true,
            myLocationButton: false,
            indoorPicker: false
          },
          gestures: {
            scroll: true,
            tilt: true,
            rotate: false,
            zoom: true
          },
          preferences: {
            zoom: {
              minZoom: 0,
              maxZoom: 110,
            },
            building: false
          },
          styles: []
        };

        //Create the map
        this.googleMap = this.googleMaps.create(this.htmlElement, mapOptions);

        if (this.appconfig.isDebugging()) {
          console.log('Courses map created');
        }

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

            if (this.appconfig.isDebugging()) {
              console.log('Courses map ready fired');
            }

            //Adjust the height
            this.htmlElement.style.height = MemorySettings.viewHeight - 60 + 'px';
            this.htmlElement.style.width = MemorySettings.viewWidth + 'px';

            //Done
            resolve(true);
          })
          .catch((r) => {

            //Track
            this.trackError('Courses nearby map failed to load');

            if (this.appconfig.isDebugging()) {
              console.log('Courses map failed: ' + JSON.stringify(r));
            }

            //Done
            resolve(false);
          });
      }
    });
  }
}

[vinceharmon]

It’s not that I don’t want to share my project files, but this is a very small piece of my overall application.

Discovered my issue. When the map is created and the Map.js method getMap is called the code is now checking to see if the div has a minimum size. (100 x 100) line: 137. My initial size was smaller because in my code I adjust the size of the map to the size of the phone screen after creation and in the MAP_READY method. The MAP_READY was never called because of this.

In the previous version 1.4+ the div size was fine. I should have mentioned my code worked in previous version 1.4+.

Now I’m getting past the creation and into the MAP_READY code successfully but I’m seeing a blank white screen. Since my code worked in version 1.4.+ is there anything different I need to do to make the map visible that has changed?

Here are my console logs.

Creating courses map coursesnearbymap.component.ts:235 <div id=​"map" style=​"width:​ 360px;​ height:​ 580px;​ position:​ relative;​ overflow:​ hidden;​ background-color:​ rgba(0, 0, 0, 0)​;​" __pluginmapid=​"map_0_118318805606" __plugindomid=​"pgm1477717822080" class=​"gmaps_cdv">​</div>​ coursesnearbymap.component.ts:236 Object {mapType: “MAP_TYPE_ROADMAP”, camera: Object, controls: Object, gestures: Object, preferences: Object…} coursesnearbymap.component.ts:242 <div id=​"map" style=​"width:​ 360px;​ height:​ 580px;​ position:​ relative;​ overflow:​ hidden;​ background-color:​ rgba(0, 0, 0, 0)​;​" __pluginmapid=​"map_0_118318805606" __plugindomid=​"pgm1477717822080" class=​"gmaps_cdv">​</div>​ coursesnearbymap.component.ts:247 GoogleMap {objectInstance: Map}objectInstance: Map__proto: BaseClass coursesnearbymap.component.ts:286 Courses map created coursesnearbymap.component.ts:293 Courses map ready fired coursesnearbymap.component.ts:337 Courses map finished

[wf9a5m75]

Your code is very messy… Please format it at least. I beautified your code.