LocationService ionic google-maps object failing for ios, but works in android

I have found on android that using geolocation from Google Maps JavaScript API and from the Ionic Framework has caused issues of being very slow or not working at all. I then found a second geolocation module for Ionic called LocationService, from this documentation: https://github.com/ionic-team/ionic-native-google-maps/blob/master/documents/locationservice/README.md. The issue that I am having is although this Location module is working for Android, it is not working on ios or by serving the app on localhost. Below is the error that I am getting and my code that sets the map's center.

map.html:

<ion-header>
  <ion-navbar>
    <ion-title>
      Map
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content>
  <div id='map'></div>
</ion-content>

map.ts:

import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController, Platform, Navbar } from 'ionic-angular';
import { Geolocation } from '@ionic-native/geolocation';
import {
  LocationService,
  GoogleMap,
  GoogleMapOptions,
  MyLocation,
  GoogleMaps
} from '@ionic-native/google-maps';

declare var google: any;
@Component({
  selector: 'page-map',
  templateUrl: 'map.html',
})
export class OfficeLocatorPage {
  @ViewChild(Navbar) navBar: Navbar;
  map: any;
  mapOptions:any;
  trafficEnabled = false;
  transitEnabled = false;
  bicycleEnabled = false;
  markers = [];
  places = [];
  trafficLayer = new google.maps.TrafficLayer();
  transitLayer = new google.maps.TransitLayer();
  bicycleLayer = new google.maps.BicyclingLayer();
  myLocation: any;
  infoWindow: any;
  isInfoWindowShown: boolean = false;

  constructor(private navCtrl: NavController, private platform: Platform, private geolocation: Geolocation) {
  }

  ionViewDidLoad() {
    this.navBar.backButtonClick = (e:UIEvent)=>{
      this.navCtrl.pop({animate: true, animation: "transition", direction: "left", duration: 300});
    };
 }
  ionViewDidEnter() {
      this.platform.ready().then(() => {
        this.places = [];
        this.initMap(this);
    });
  }
  initMap(scopeObj) {
    LocationService.getMyLocation({enableHighAccuracy: true}).then((location: MyLocation) => {
      this.setLocation(location.latLng);
    }).catch((error: any) => {
      // Can not get location, permission refused, and so on...
      console.log(error);
    });
  }

  setLocation(location) {
      this.map = new google.maps.Map(document.getElementById('map'), {
          center: location,
          zoom: 10,
          disableDefaultUI: true
      });
      let image = {
        url: "assets/icon/blue_dot.png", // url
        scaledSize: new google.maps.Size(25, 33), // scaled size
        origin: new google.maps.Point(0,0), // origin
        anchor: new google.maps.Point(0, 0) // ancho
      };
      let marker = new google.maps.Marker({
        position: location,
        map: this.map,
        icon: image
      });
      this.myLocation = new google.maps.LatLng(location.lat, location.lng);
    }

Error log:

Error: Uncaught (in promise): TypeError: Cannot read property 'LocationService' of null
TypeError: Cannot read property 'LocationService' of null
    at http://localhost:8100/build/vendor.js:78338:35
    at new t (http://localhost:8100/build/polyfills.js:3:21506)
    at Function.LocationService.getMyLocation 

from LocationService ionic google-maps object failing for ios, but works in android