addTileOverlay does not render tiles on the iOS or android devices

[stevebrowndotco]

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

• question
• any problem or bug report
• feature request

If you choose 'problem or bug report', please select OS: (check one with "x")

• Android
• iOS
• Browser

cordova information: (run $> cordova plugin list)

com.googlemaps.ios 3.9.0 "Google Maps SDK for iOS"
cordova-android-support-gradle-release 3.0.1 "cordova-android-support-gradle-release"
cordova-plugin-advanced-http 2.5.1 "Advanced HTTP plugin"
cordova-plugin-buildinfo 2.0.3 "BuildInfo"
cordova-plugin-camera 4.1.0 "Camera"
cordova-plugin-device 2.0.3 "Device"
cordova-plugin-facebook4 6.4.0 "Facebook Connect"
cordova-plugin-file 6.0.2 "File"
cordova-plugin-geolocation 4.0.2 "Geolocation"
cordova-plugin-globalization 1.11.0 "Globalization"
cordova-plugin-googlemaps 2.7.1 "cordova-plugin-googlemaps"
cordova-plugin-ionic 5.4.7 "cordova-plugin-ionic"
cordova-plugin-ionic-keyboard 2.2.0 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 4.2.1 "cordova-plugin-ionic-webview"
cordova-plugin-network-information 2.0.2 "Network Information"
cordova-plugin-sign-in-with-apple 0.1.2 "cordova-plugin-sign-in-with-apple"
cordova-plugin-splashscreen 5.0.4 "Splashscreen"
cordova-plugin-statusbar 2.4.3 "StatusBar"
cordova-plugin-telerik-imagepicker 2.3.5 "ImagePicker"
cordova-plugin-whitelist 1.3.4 "Whitelist"
cordova-sqlite-storage 3.4.1 "Cordova sqlite storage plugin - cordova-sqlite-storage plugin version"
cordova-universal-links-plugin 1.2.1 "Universal Links Plugin"

If you use @ionic-native/google-maps, please tell the package.json (only @ionic-native/core and @ionic-native/google-maps are fine mostly)

Current behavior:
On iOS or Android, if I add a tileOverlay, it does not render. Only the underlying google maps is shown. However, on cordova browser it works perfectly.

Expected behavior:
I see the tile overlay

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

    this.map = GoogleMaps.create('map_canvas', mapOptions);
    this.map.addTileOverlaySync({
      getTile: (x, y, z) => `https://tiles.stadiamaps.com/tiles/alidade_smooth/${z}/${x}/${y}@1x.png`
    });

[wf9a5m75]

Please try this

getTile: (x: number, y: number, zoom: number) => {
          return layerUrl.replace("{zoom}", zoom + "")
                    .replace("{x}", x + "")
                    .replace("{y}", y + "");
        }

[stevebrowndotco]

Hello, i followed this exactly

      getTile: (x, y, z): string => {
        return 'https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}@1x.png'.replace('{z}', z + '').replace('{x}', x + '').replace('{y}', y + '');
      }

I'm running on a real device (android) and when I run Chrome inspect I get this error:

consolelogs.js:50 ERROR Error: Uncaught (in promise): TypeError: Cannot read property '_privateInitialize' of undefined
TypeError: Cannot read property '_privateInitialize' of undefined

Error is traced to here in Map.js:

  self.exec.call(self, function() {
    tileOverlay._privateInitialize();
    delete tileOverlay._privateInitialize;

    if (typeof callback === 'function') {
      callback.call(self, tileOverlay);
    }
  }, self.errorHandler, self.__pgmId, 'loadPlugin', ['TileOverlay', options, hashCode]);

[wf9a5m75]

Are you running on Capacitor?

[stevebrowndotco]

Cordova

[wf9a5m75]

Could you share the GitHub repository?