Delay in loading google maps style

[jchri853]

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

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

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

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

cordova information: (run $> cordova plugin list)

cordova-plugin-device 2.0.2 "Device"
cordova-plugin-googlemaps 2.6.2 "cordova-plugin-googlemaps"
cordova-plugin-ionic-keyboard 2.1.3 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 4.0.1 "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)

Current behavior:

Running ionic-googlemaps-quickdemo-v4 app on iOS device (iPhone X): when applying a style default map colors will render then custom styles after a delay. The occurs when changing views on an ionic app.

Expected behavior:

Render custom styles instantly when changing pages with a map in the view. See video.

I don't see this running in browser or on an Android device - perhaps its just how the map gets rendered using GM for IOS? Thank you in advance.

Screen capture or video record:

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

https://github.com/mapsplugin/ionic-googlemaps-quickdemo-v4

Using the ionic-googlemaps-quickdemo-v4 example github project, I added the line of code " styles: LightMaps" under the loadMap function in the marker-cluster-page.ts

/marker-cluster/marker-cluster-page.ts

import { LightMap } from "../marker-cluster/style";

loadMap() {
    this.map = GoogleMaps.create('map_canvas', {
      styles:  LightMaps,
      'camera': {
        'target': {
          "lat": 21.382314,
          "lng": -157.933097
        },
        'zoom': 10
      }
    });

    this.addCluster(this.dummyData());
  }

/marker-cluster/style.ts

export const LightMaps = [

  {
    "featureType": "all",
    "elementType": "geometry.fill",
    "stylers": [
        {
            "weight": "2.00"
        }
    ]
},
{
    "featureType": "all",
    "elementType": "geometry.stroke",
    "stylers": [
        {
            "color": "#9c9c9c"
        }
    ]
},
{
    "featureType": "all",
    "elementType": "labels.text",
    "stylers": [
        {
            "visibility": "on"
        }
    ]
},
{
    "featureType": "landscape",
    "elementType": "all",
    "stylers": [
        {
            "color": "#f2f2f2"
        }
    ]
},
{
    "featureType": "landscape",
    "elementType": "geometry.fill",
    "stylers": [
        {
            "color": "#ffffff"
        }
    ]
},
{
    "featureType": "landscape.man_made",
    "elementType": "geometry.fill",
    "stylers": [
        {
            "color": "#ffffff"
        }
    ]
},
{
    "featureType": "poi",
    "elementType": "all",
    "stylers": [
        {
            "visibility": "off"
        }
    ]
},
{
    "featureType": "road",
    "elementType": "all",
    "stylers": [
        {
            "saturation": -100
        },
        {
            "lightness": 45
        }
    ]
},
{
    "featureType": "road",
    "elementType": "geometry.fill",
    "stylers": [
        {
            "color": "#eeeeee"
        }
    ]
},
{
    "featureType": "road",
    "elementType": "labels.text.fill",
    "stylers": [
        {
            "color": "#7b7b7b"
        }
    ]
},
{
    "featureType": "road",
    "elementType": "labels.text.stroke",
    "stylers": [
        {
            "color": "#ffffff"
        }
    ]
},
{
    "featureType": "road.highway",
    "elementType": "all",
    "stylers": [
        {
            "visibility": "simplified"
        }
    ]
},
{
    "featureType": "road.arterial",
    "elementType": "labels.icon",
    "stylers": [
        {
            "visibility": "off"
        }
    ]
},
{
    "featureType": "transit",
    "elementType": "all",
    "stylers": [
        {
            "visibility": "off"
        }
    ]
},
{
    "featureType": "water",
    "elementType": "all",
    "stylers": [
        {
            "color": "#46bcec"
        },
        {
            "visibility": "on"
        }
    ]
},
{
    "featureType": "water",
    "elementType": "geometry.fill",
    "stylers": [
        {
            "color": "#c8d7d4"
        }
    ]
},
{
    "featureType": "water",
    "elementType": "labels.text.fill",
    "stylers": [
        {
            "color": "#070707"
        }
    ]
},
{
    "featureType": "water",
    "elementType": "labels.text.stroke",
    "stylers": [
        {
            "color": "#ffffff"
        }
    ]
}

]

[wf9a5m75]

I have no idea.

[wf9a5m75]

Remove these properties:

      'camera': {
        'target': {
          "lat": 21.382314,
          "lng": -157.933097
        },
        'zoom': 10
      }

[wf9a5m75]

For stability, this plugin of iOS implementation inserts 1 seconds delay if camera property is specified. https://github.com/mapsplugin/cordova-plugin-googlemaps/blob/ad8c27d86f7272c3212dbecf835ec9692d76ae75/src/ios/GoogleMaps/PluginMap.m#L137-L146

[jchri853]

Got it, thanks for looking into this.