Ionic Google maps Can not find the element [#map_canvas]

@aligassan wrote:

I have a Ionic App using google maps polyline to get latitude and longitude from data json api for flight route . l want to do reload data automatic , to see live data on map . l added set Interval to reload data. The data is reload and console , but l have error below and no live data showing on map .

ERROR Error: Uncaught (in promise): Error: Can not find the element [#map_canvas]
Error: Can not find the element [#map_canvas]
    at vendor.js:76400
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.js:2781)
    at Object.onInvokeTask (vendor.js:51333)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.js:2780)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (polyfills.js:2553)
    at push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask (polyfills.js:2856)
    at ZoneTask.invoke (polyfills.js:2845)
    at timer (polyfills.js:4639)
    at resolvePromise (polyfills.js:3189)
    at resolvePromise (polyfills.js:3146)
    at polyfills.js:3250
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.js:2781)
    at Object.onInvokeTask (vendor.js:51333)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.js:2780)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (polyfills.js:2553)
    at drainMicroTaskQueue (polyfills.js:2959)
    at push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask (polyfills.js:2860)
    at ZoneTask.invoke (polyfills.js:2845)

my code

 import { Component, OnInit } from '@angular/core';
import { ToastController, Platform } from '@ionic/angular';
import { HTTP } from '@ionic-native/http/ngx';
import { GoogleMap, GoogleMaps, Polyline, ILatLng, Marker } from '@ionic-native/google-maps';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-map-track-befor',
  templateUrl: './map-track-befor.page.html',
  styleUrls: ['./map-track-befor.page.scss'],
})
export class MapTrackBeforPage implements OnInit {

  map: GoogleMap;
  points: { lng: number, lat: number }[] = [];
  public myFlag = true;
  id: any
  callsign : any
  constructor(
    public toastCtrl: ToastController,
    private platform: Platform,
    private http: HTTP,
    private activatedRoute: ActivatedRoute) {
    this.activatedRoute.params.subscribe((params) => {
      this.id = params['id'];
      this.callsign = params['callsign']

    });

    setInterval(()=> {
      this.getmarker()
    },4000); 
    

  }

  async  ngOnInit() {
    await  this.platform.ready();
    await   this.getmarker();
    
  }

  async getmarker() {
    this.http.get('xxxxxxxxxx.json?flightId=' + this.id + '', {}, {})

      .then(data => {

        for (let datas of JSON.parse(data.data).result.response.data.flight['track']) {
          this.points.push({ lng: datas.longitude, lat: datas.latitude });
        }
        let AIR_PORTS = this.points;
        console.log(AIR_PORTS)
    
        this.map = GoogleMaps.create('map_canvas', {
          camera: {
            target: AIR_PORTS
          }
        });
    
        let polyline: Polyline = this.map.addPolylineSync({
          points: AIR_PORTS,
          color: '#AA00FF',
          width: 5,
          geodesic: true,
          clickable: true,
    
    
        });
        var mvcArray = polyline.getPoints();

        let marker: Marker = this.map.addMarkerSync({
          title: 'Ionic',
          icon: 'blue',
          animation: 'DROP',
          position:this.points[- 1]

        });
    
        let points: Array<ILatLng> = this.points = []
    
    

      })
  } 


  
}

html

  <div style="height: 100%;width: 100%" id="map_canvas"></div>

Posts: 3

Participants: 2

Read full topic