Google map Polyline not displaying and throwing error

Question

I have Ionic 3 app and I have updated it to IONIC 4 . So when I compile app with xcode 10 for ios 12 google map polylines are not rendering and throwing error. It was rendering perfectly fine for IONIC 3 and ios 11.3 but after updation it has stopped showing: My code is :

for (const path of dashedlinePaths) {

  const lineSymbol = {
    path: 'M 0,-1 0,1',
    strokeOpacity: 1,
    scale: 4
  };

  let dashedPath = new google.maps.Polyline({
    path: path,
    geodesic: true,
    strokeOpacity: 0,
    strokeColor: '#ff883c',
    icons: [{
      icon: lineSymbol,
      offset: '0',
      repeat: '20px'
    }]
  });

  dashedPath.setMap(this.googleMap);
}

for (const path of linePaths) {

  let linePath = new google.maps.Polyline({
    path: path,
    geodesic: true,
    strokeColor: '#ff883c',
    strokeOpacity: 1.0,
    strokeWeight: 4
  });

  linePath.setMap(this.googleMap);
}

And errors are showing something like below:

TypeError: null is not an object (evaluating 'e.lineJoin="round"')
runTask — polyfills.js:3880
invokeTask — polyfills.js:4017
n — polyfills.js:3457
runTask — polyfills.js:3880

Also its showing warnings like :

Total canvas memory use exceeds the maximum limit (224 MB).lW — poly.js:52:321

Also when I try to zoom map getting the error:

TypeError: null is not an object (evaluating 'a.scale')
runTask — polyfills.js:3880
invokeTask — polyfills.js:4017
n — polyfills.js:3457
runTask — polyfills.js:3880

Answer 1

It's a bug in Google Maps JS SDK on iOS Safari.

It has been acknowledged by Google, here are two tickets created for this, one even contains a Fiddle explaining how to reproduce it.

https://issuetracker.google.com/issues/119875119

https://issuetracker.google.com/issues/115289894