Question - Usage of Spherical with Ionic

I’m submitting a … (check one with “x”) [ X ] question [ ] 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)

cordova-plugin-browsertab 0.2.0 "cordova-plugin-browsertab"
cordova-plugin-buildinfo 1.1.0 "BuildInfo"
cordova-plugin-compat 1.2.0 "Compat"
cordova-plugin-console 1.1.0 "Console"
cordova-plugin-device 1.1.6 "Device"
cordova-plugin-file 4.3.3 "File"
cordova-plugin-geolocation 2.4.3 "Geolocation"
cordova-plugin-globalization 1.0.7 "Globalization"
cordova-plugin-googlemaps 2.0.11 "cordova-plugin-googlemaps"
cordova-plugin-googleplus 5.1.1 "Google SignIn"
cordova-plugin-inappbrowser 1.7.1 "InAppBrowser"
cordova-plugin-insomnia 4.3.0 "Insomnia (prevent screen sleep)"
cordova-plugin-nativeaudio 3.0.9 "Cordova Native Audio"
cordova-plugin-nativestorage 2.2.2 "NativeStorage"
cordova-plugin-splashscreen 4.0.3 "Splashscreen"
cordova-plugin-statusbar 2.2.3 "StatusBar"
cordova-plugin-whitelist 1.3.2 "Whitelist"
cordova-universal-links-plugin 1.2.1 "Universal Links Plugin"
ionic-plugin-keyboard 2.2.1 "Keyboard"
phonegap-plugin-barcodescanner 5.0.1 "BarcodeScanner"

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

    "@angular/common": "^4.4.4",
    "@angular/compiler": "^4.4.4",
    "@angular/compiler-cli": "^4.4.4",
    "@angular/core": "^4.4.4",
    "@angular/forms": "^4.4.4",
    "@angular/http": "^4.4.4",
    "@angular/platform-browser": "^4.4.4",
    "@angular/platform-browser-dynamic": "^4.4.4",
    "@angular/tsc-wrapped": "^4.4.4",
    "@ionic-native/barcode-scanner": "^4.3.1",
    "@ionic-native/core": "^4.3.1",
    "@ionic-native/device": "^4.3.1",
    "@ionic-native/file": "^4.3.1",
    "@ionic-native/geolocation": "^4.3.1",
    "@ionic-native/globalization": "^4.3.1",
    "@ionic-native/google-maps": "^4.3.1",
    "@ionic-native/google-plus": "^4.3.1",
    "@ionic-native/in-app-browser": "^4.3.1",
    "@ionic-native/insomnia": "^4.3.1",
    "@ionic-native/native-audio": "^4.3.1",
    "@ionic-native/native-storage": "^4.3.1",
    "@ionic-native/splash-screen": "^4.3.1",
    "@ionic-native/status-bar": "^4.3.1",
    "@ionic/storage": "^2.0.1",
    "@ngx-translate/core": "^8.0.0",
    "@ngx-translate/http-loader": "^2.0.0",
    "cordova-custom-config": "^4.0.2",
    "firebase": "^4.5.0",
    "fs-extra": "^4.0.2",
    "geofire": "^4.1.2",
    "ionic-angular": "^3.7.1",
    "ionicons": "^3.0.0",
    "ng2-cordova-oauth": "0.0.8",
    "promise-polyfill": "^6.0.2",
    "qrcode": "^0.9.0",
    "raven-js": "^3.18.1",
    "rxjs": "^5.4.3",
    "sw-toolbox": "^3.6.0",
    "zone.js": "^0.8.18"
  },
  "devDependencies": {
    "@ionic/app-scripts": "^3.0.0",
    "ionic": "3.13.0",
    "node-sass": "^4.5.3",
    "typescript": "^2.5.3"
  }

This is just a question. On Android, I can do this:

constructor(private googleMaps: GoogleMaps) {
    /** ... */
  }

/** on another method */
this.googleMaps.spherical().computeDistanceBetween(a, b)

And I get no problem. However, on iOS, typescript complains that GoogleMaps doesn’t have a field ‘spherical()’. So, what’s the proper way to get an instance of Spherical with ionic (typescript)?

[stormwin]

Install latest ionic-native google-maps wrapper. Add Spherical in app.modules.ts in providers

import { Spherical } from '@ionic-native/google-maps';
constructor(private spherical: Spherical) {
    /** ... */
  }

/** on another method */
this.spherical.computeDistanceBetween(a, b);

This works for me.

[wf9a5m75]

Example:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import {
  GoogleMaps,
  GoogleMap,
  GoogleMapsEvent,
  Spherical,
  Marker,
  ILatLng
} from '@ionic-native/google-maps';


@IonicPage()
@Component({
  selector: 'page-interpolate',
  templateUrl: 'interpolate.html',
  providers: [
    Spherical
  ]
})
export class InterpolatePage {
  map: GoogleMap;
  nyc: ILatLng = {"lat": 40.715, "lng": -74.002};
  london: ILatLng = {"lat": 51.506, "lng": -0.119};
  points = [this.nyc, this.london];

  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    private googleMaps: GoogleMaps,
    private spherical: Spherical) {
  }

  ionViewDidLoad() {
    this.loadMap();
  }

  loadMap() {

    this.map = this.googleMaps.create('map_canvas', {
      camera: {
        target: this.points,
        padding: 100
      }
    });

    // Wait the MAP_READY before using any methods.
    this.map.one(GoogleMapsEvent.MAP_READY).then(() => {

      this.map.addPolyline({
        "points": this.points,
        "geodesic": true
      });

      this.map.addMarker({
        position: this.nyc
      }).then((marker: Marker) => {

        let fraction = 0;
        let direction = 1;
        setInterval(() => {
          fraction += 0.01 * direction;
          if (fraction >= 1) {
            direction = -1;
          } else if (fraction <= 0) {
            direction = 1;
          }

          marker.setPosition(this.spherical.interpolate(this.nyc, this.london, fraction));
        }, 50);

      });
    });
  }
}