InvalidValueError: setMap: not an instance of Map; and not an instance of StreetViewPanorama

Ionic Native
1

My.ts file:


import { Observable } from 'rxjs/Observable';
import { NavController, LoadingController } from 'ionic-angular';
import { Component, ViewChild, ElementRef, Input } from '@angular/core';
import { Geolocation } from '@ionic-native/geolocation';
/**
 * Generated class for the MyComponent component.
 *
 * See https://angular.io/docs/ts/latest/api/core/index/ComponentMetadata-class.html
 * for more info on Angular Components.
 */
declare var google;
@Component({
  selector: 'my',
  templateUrl: 'my.html'
})

export class MyComponent {
 public isMapIdle: boolean;
  public map: any;
  @Input()  isPickupRequested:boolean;
  @ViewChild('map') mapElement: ElementRef;

text:string;
constructor(public navCtrl: NavController, public loadingCtrl: LoadingController, public geolocation: Geolocation) {
   this.text="sabari";
  }
ngOnInit()
{
  this.loadmap();
  this.getCurrentLocation().subscribe(location => {
    this.centerLocation(location);
  });
  
}

ngViewOnInit()
{

  this.addMapEventListeners();
}
  addMapEventListeners() {

  google.maps.event.addListener(this.map, 'dragstart', () => {
    this.isMapIdle = false;
  })
  google.maps.event.addListener(this.map, 'idle', () => {
    this.isMapIdle = true;
  })

}


loadmap()
{
  let latLng = new google.maps.LatLng(-34.9290, 138.6010);

  let mapOptions = {
    center: latLng,
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  //this.isPickupRequested = false;
  this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
}

  getCurrentLocation(): Observable<any> {

    let loading = this.loadingCtrl.create({
      content: 'Locating...'
    });

    loading.present(loading);

    let options = { timeout: 10000, enableHighAccuracy: true };

    let locationObs = Observable.create(observable => {

      this.geolocation.getCurrentPosition(options)
        .then(resp => {
          let lat = resp.coords.latitude;
          let lng = resp.coords.longitude;

          let location = new google.maps.LatLng(lat, lng);

          console.log('Geolocation: ' + location);

          observable.next(location);

          loading.dismiss();
        },
        (err) => {
          console.log('Geolocation err: ' + err);
          loading.dismiss();
        })

    })

    return locationObs;
  }

  centerLocation(location) {

    if (location) {
      this.map.panTo(location);
    }
    else {

      this.getCurrentLocation().subscribe(currentLocation => {
        this.map.panTo(currentLocation);
      });
    }
  }
}

Pickup.ts file

import { GoogleMap } from '@ionic-native/google-maps';
import { Component, Input,Output,EventEmitter } from '@angular/core';
declare var google:any;
@Component({
  selector: 'pickup',
  templateUrl: 'pickup.html'
})
export class PickupComponent {
  popup: any;
 // popup: any;

  image1: string;
  pickupMarker: any;
  @Input() map: any;
  @Input() isPinSet:boolean;
  @Input() isPickupRequested:boolean;
   constructor() {
    }

    ngOnChanges(changes)
    {
      if(!this.isPickupRequested)
        {
          this.showPickupMarker();
        }

        else
          {
            this.removePickupMarker();
          }
    }


    showPickupMarker()
    {
      this.image1 = '../assets/img/person-icon.png';
           this.pickupMarker = new google.maps.Marker({
             map:this.map,
             animation: google.maps.Animation.BOUNCE,
             icon : this.image1
           })
           setTimeout( ()=> {
             this.pickupMarker.setAnimation(null);

           },800);

           //this.showPickupTime();
    }

    removePickupMarker()
    {
    if(this.pickupMarker)
      {
        this.pickupMarker.setMap(null);
        this.pickupMarker = null;
      }
    }

 /*    showPickupTime()
    {

       this.popup = new google.maps.InfoWindow({
        content: '<h5> You are Here </h5>'
      });

      this.popup.open(this.map, this.pickupMarker);
      google.maps.event.addListener(this.pickupMarker, 'click', () => {
        this.popup.open(this.map, this.pickupMarker);
      });
    } */
}

How can i resolve this error??

2

Hi there!

Having the same here, Did u solve this?