[iOS] Marker Icons shown and Marker creation callback executed only when in --livereload mode

[AlessandroBagnoli]

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") [ ] Android [x] 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-app-preferences 0.99.3 "AppPreferences"
cordova-plugin-camera 2.4.1 "Camera"
cordova-plugin-compat 1.2.0 "Compat"
cordova-plugin-device 1.1.6 "Device"
cordova-plugin-dialogs 1.3.3 "Notification"
cordova-plugin-facebook4 1.9.1 "Facebook Connect"
cordova-plugin-geolocation 2.4.3 "Geolocation"
cordova-plugin-googlemaps 2.0.11 "cordova-plugin-googlemaps"
cordova-plugin-ionic-webview 1.1.15 "cordova-plugin-ionic-webview"
cordova-plugin-network-information 1.3.3 "Network Information"
cordova-plugin-splashscreen 4.0.3 "Splashscreen"
cordova-plugin-statusbar 2.2.4-dev "StatusBar"
cordova-plugin-whitelist 1.3.2 "Whitelist"
cordova-plugin-x-socialsharing 5.1.8 "SocialSharing"
cordova-plugin-x-toast 2.6.0 "Toast"
es6-promise-plugin 4.1.0 "Promise"
ionic-plugin-keyboard 2.2.1 "Keyboard"
uk.co.workingedge.phonegap.plugin.launchnavigator 4.0.7 "Launch Navigator"

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

{
  "name": "myApp",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "4.4.3",
    "@angular/compiler": "4.4.3",
    "@angular/compiler-cli": "4.4.3",
    "@angular/core": "4.4.3",
    "@angular/forms": "4.4.3",
    "@angular/http": "4.4.3",
    "@angular/platform-browser": "4.4.3",
    "@angular/platform-browser-dynamic": "4.4.3",
    "@ionic-native/app-preferences": "^4.3.1",
    "@ionic-native/camera": "^4.3.1",
    "@ionic-native/core": "4.3.0",
    "@ionic-native/facebook": "^4.3.1",
    "@ionic-native/geolocation": "^4.3.1",
    "@ionic-native/google-maps": "^4.3.1",
    "@ionic-native/keyboard": "^4.3.1",
    "@ionic-native/launch-navigator": "^4.3.2",
    "@ionic-native/network": "^4.3.1",
    "@ionic-native/social-sharing": "^4.3.1",
    "@ionic-native/splash-screen": "4.3.0",
    "@ionic-native/status-bar": "4.3.0",
    "@ionic-native/toast": "^4.3.1",
    "@ionic/storage": "2.0.1",
    "cordova-android": "6.3.0",
    "cordova-browser": "5.0.0",
    "cordova-ios": "4.5.1",
    "cordova-plugin-actionsheet": "^2.3.3",
    "cordova-plugin-app-preferences": "^0.99.3",
    "cordova-plugin-camera": "^2.4.1",
    "cordova-plugin-compat": "^1.2.0",
    "cordova-plugin-device": "^1.1.6",
    "cordova-plugin-dialogs": "^1.3.3",
    "cordova-plugin-facebook4": "^1.9.1",
    "cordova-plugin-geolocation": "^2.4.3",
    "cordova-plugin-googlemaps": "^2.0.11",
    "cordova-plugin-ionic-webview": "^1.1.15",
    "cordova-plugin-network-information": "^1.3.3",
    "cordova-plugin-splashscreen": "^4.0.3",
    "cordova-plugin-statusbar": "git+https://github.com/apache/cordova-plugin-statusbar.git",
    "cordova-plugin-whitelist": "^1.3.2",
    "cordova-plugin-x-socialsharing": "^5.2.0",
    "cordova-plugin-x-toast": "^2.6.0",
    "es6-promise-plugin": "^4.1.0",
    "firebase": "^4.5.1",
    "geofire": "^4.1.2",
    "geolocation-marker": "^2.0.5",
    "ionic-angular": "3.7.1",
    "ionic-plugin-keyboard": "^2.2.1",
    "ionicons": "3.0.0",
    "promise-polyfill": "6.0.2",
    "rxjs": "5.4.3",
    "sw-toolbox": "3.6.0",
    "uk.co.workingedge.phonegap.plugin.launchnavigator": "^4.0.7",
    "zone.js": "0.8.18"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.0.0",
    "ionic": "3.15.2",
    "typescript": "2.3.4"
  },
  "description": "An Ionic project",
  "cordova": {
    "platforms": [
      "android",
      "ios"
    ],
    "plugins": {
      "cordova-plugin-device": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-whitelist": {},
      "ionic-plugin-keyboard": {},
      "cordova-plugin-geolocation": {
        "GEOLOCATION_USAGE_DESCRIPTION": " "
      },
      "cordova-plugin-facebook4": {
        "APP_ID": "CENSORED",
        "APP_NAME": "CENSORED"
      },
      "cordova-plugin-app-preferences": {},
      "cordova-plugin-x-toast": {},
      "cordova-plugin-network-information": {},
      "cordova-plugin-compat": {},
      "cordova-plugin-camera": {
        "CAMERA_USAGE_DESCRIPTION": "Camera",
        "PHOTOLIBRARY_USAGE_DESCRIPTION": "Libreria Foto"
      },
      "cordova-plugin-x-socialsharing": {},
      "cordova-plugin-googlemaps": {
        "API_KEY_FOR_IOS": "CENSORED",
        "API_KEY_FOR_ANDROID": "CENSORED"
      },
      "uk.co.workingedge.phonegap.plugin.launchnavigator": {
        "LOCATION_USAGE_DESCRIPTION": "This app requires access to your location for navigation purposes"
      }
    }
  }
}

Current behavior: Callback after marker creation is not executed, moreover, the custom icons for the markers are not shown. Everything is fine only when i launch the app in --livereload mode. On Android, everything is fine even without the --livereload option.

Expected behavior:

Steps to reproduce:

Screen capture or video record:

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

loadMap() {
    this.mapElement = document.getElementById('map');
    let mapOptions: GoogleMapOptions = {
      camera: {
        target: this.currentPosition,
        zoom: 15
      },
      controls: {
        compass: false,
        myLocationButton: false,
        indoorPicker: false,
        mapToolbar: false,
        zoom: false,
      },
      mapType: "MAP_TYPE_NORMAL"
    };

    this.map = this.googleMaps.create(this.mapElement, mapOptions);
    this.map.one(GoogleMapsEvent.MAP_READY).then(() => {
      this.map.addMarker({
        position: this.currentPosition,
        icon: {
          url: './assets/positionmarker.png',
          size: {
            width: 32,
            height: 32
          }
        }
      }).then((marker) => { //quando il marker è stato aggiunto, lo salvo per trackerlo e mi sposto sulla sua posizione
        this.currentPositionMarker = marker;
        this.map.setCameraTarget(this.currentPosition);
        this.setupList();
      });
      this.geoLocation.watchPosition().subscribe( (position) => {
        this.currentPosition = new LatLng(position.coords.latitude, position.coords.longitude);
        if (this.currentPositionMarker !== undefined) {
          this.currentPositionMarker.setPosition(this.currentPosition);
        }
      });
    });
  }

[wf9a5m75]

Try this:

setTimeout(this.loadMap.bind(this), 1000);

[AlessandroBagnoli]

@wf9a5m75 nothing changes, same result as before.

[wf9a5m75]

Ok, please share your project files on github. I will check it.

[wf9a5m75]

I have been released new version. Try with the new version.

[AlessandroBagnoli]

@wf9a5m75 what's the best way to update the plugin?

[wf9a5m75]

$> cordova plugin rm cordova-plugin-googlemaps

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

$> cordova plugin add  cordova-plugin-googlemaps@2.1.1 --variable API_KEY... --no-fetch

$> npm install @ionic-native/core@4.3.3 @ionic-native/google-maps@4.3.3

[AlessandroBagnoli]

@wf9a5m75 thank you, can't look at my code until saturday, I'll let you know by then.

[AlessandroBagnoli]

Everything works fine with the latest version. Thank you and keep up the good work buddy!