ERROR TypeError: null is not an object (evaluating 'this._icon.imageSource.ios')

Question

I'm trying to get custom marker icon on map. I have used nativescript-google-maps-sdk v^2.9.1 and I'm getting following error.

CONSOLE LOG file:///node_modules/@nativescript/core/image-source/image-source.js:306:0: fromResource() is deprecated. Use ImageSource.fromResourceSync() instead.
CONSOLE ERROR file:///node_modules/@angular/core/fesm5/core.js:4002:0: ERROR TypeError: null is not an object (evaluating 'this._icon.imageSource.ios')

the code added to get marker on map is

addMarker(mark, index): void {
    const marker = new Marker();
    marker.position = Position.positionFromLatLng(mark.latitude, mark.longitude);
    // marker.icon = this.ocean_pin; // default pin
    const is24 = (isIOS ? '_24' : '');
    marker.icon = 'https://www.iconsdb.com/icons/preview/red/map-marker-2-xxl.png';//'https://mob-app-assets.s3.eu-west-2.amazonaws.com/pin_ocean' + is24 + '.png'; // default pin
    this.mapView.addMarker(marker);
    this.mMarkers.push(marker); // to update marker pin when carousel swiped
  }

previously I was using icon from assets, and it was working like a charm. Find the code below that was working for icons from assets.

import * as imageSource from 'tns-core-modules/image-source';
import { Image } from 'tns-core-modules/ui/image/image';


constructor() {
    super();
    this.buttonHeight = isAndroid ? 45 : 35;
    const is24 = (isIOS ? '_24' : '');
    this.ocean_pin = new Image();
    this.ocean_pin.src = '~assets/icons/pin_ocean' + is24 + '.png';
    this.ocean_pin.imageSource = imageSource.fromFile('~assets/icons/pin_ocean' + is24 + '.png');
    this.pink_pin = new Image();
    this.pink_pin.src = '~assets/icons/pin_pink' + is24 + '.png';
    this.pink_pin.imageSource = imageSource.fromFile('~assets/icons/pin_pink' + is24 + '.png');
  }

I don't know what has went wrong. But now it's not working for icons from URL.