Can't assign varibles to LatLang in google maps


#1

i’m trying to assign variables with values getting from http request to LatLang but failed and display blank page

lattitude = this.Clinc.lat
longitude = this.Clinc.long

  ionViewDidLoad() {
     this.loadMap();
   }

  loadMap() {
     let element: HTMLElement = document.getElementById('map');
     let map: GoogleMap = GoogleMaps.create(element);


     map.one(GoogleMapsEvent.MAP_READY).then(
       () => {
         console.log('map')
       }
     )

     let ionic: LatLng = new LatLng( this.lattitude , this.longitude);

     let position: CameraPosition < any > = {
       target: ionic,
       zoom: 18,
       tilt: 30
     };
     map.moveCamera(position);
     let MarkerOptions: MarkerOptions = {
       position: ionic
     };
     map.addMarker(MarkerOptions).then((marker: Marker) => {
       marker.showInfoWindow();
     })

   }

#2

Hi @a7mdFo2ad
Please refer this tutorial for googlemap integration in ionic2/3
Also dont forget to enable the Map APIs on your google API console
Googlemap Integration in ionic


#3

hello ,
thank you for reply
the map is working but i can’t assign the LatLng inside the loadMap() i tried to console.log this.lattitude , this.longitude and the output undefined
44%20AM


#4
Clinc:any = {lat: 0, long : 0 };
lattitude:number = this.Clinc.lat = 0;
longitude:number = this.Clinc.long = 0;

this.Clinc.lat, this.Clinc.long are retrieved by service call. please initialize it. and then check.


#5

Hi @a7mdFo2ad
Are u want to set a fixsed location lattittude and longitude?

lattitude = this.Clinc.lat
longitude = this.Clinc.long

From where u accessing lattittude and longitude?
If you want to access the lattittude and longitude of current location use geolocation plugin which will provide the lattitude and longitude Geolocation(lattittude and longitude)
else you wanna set a lattittude and lkongitude manuallly
just initialize

public lattitude=9944.3;
public longitude=56.893;

and pass this param to
let ionic: LatLng = new LatLng( this.lattitude , this.longitude);


#6

not fixed. but initialised.


#7

hello i find the issue ionViewDidLoad () it’s run before constructor finish the getting the data from HTTP request.
is there any way to make ionViewDidLoad() run after constructor finish the getting data


#8

Hi @a7mdFo2ad
You are wrong,ionViewDidLoad()
will not trigger before the loading of constructor
My question is where you getting lattittude and longitude

lattitude = this.Clinc.lat
longitude = this.Clinc.long

This code


#9

from http request … and that the reason … the map initialized before getting the this.Clinc.lat , this.Clinc.long from http request
that the reason that i’m getting undefined


#10

Can you please post the code?
If you are sure with the response of your http request is undefined use the setimeout function

setTimeout(()=>{
     //http request
)1000);

#11
import { Http                                                                                                 } from '@angular/http'                 ;
import { Component, ViewChild, ElementRef                                                                                    } from '@angular/core'                 ;
import { NavController  ,NavParams,Platform,AlertController, ToastController                              } from 'ionic-angular'                 ;
import { CallNumber                                                                                           } from '@ionic-native/call-number'     ;
import { StatusBar                                                                                            } from '@ionic-native/status-bar'      ;
import { GoogleMaps ,GoogleMap,GoogleMapsEvent,GoogleMapOptions,CameraPosition,MarkerOptions,Marker,LatLng} from '@ionic-native/google-maps'     ;
import { LaunchNavigator                                                                                      } from '@ionic-native/launch-navigator';
// declare var google: any;
@Component({
  selector: 'page-clinic-profile',
  templateUrl: 'clinic-profile.html',
})
export class ClinicProfilePage {
  map: GoogleMap;




  public  ClinicData    : any    ;
  id            : string ;
  user_id = JSON.parse(localStorage.getItem('loginData')).id;
  public lattitude : any ;
  public  longitude : any  ;




  constructor(
    public Http: Http,
    private :GoogleMaps : GoogleMaps,
 {

     let id : string = this.navParams.get('id');


        this.Http.post(api, { isEnglish : 1 , id :id ,user_id : this.user_id})
         .map(res => res.json())
         .subscribe(data => {
           this.ClinicData = data[0];
           
           this.longitude = this.ClinicData.long
           this.lattitude = this.ClinicData.lat

          console.log(this.longitude )
          console.log(this.lattitude )
        },
        err => {
          console.log(err)
        })
      }
    }
    ionViewDidLoad() {

      this.DisplayMap();

    }



    DisplayMap() {

      let mapOptions: GoogleMapOptions = {
      camera: {
         target: {
           lat: this.lattitude,
           lng: this.longitude
         },
         zoom: 18,
         tilt: 30
       },
  };

    this.map = GoogleMaps.create('map_canvas', mapOptions);

    let marker: Marker = this.map.addMarkerSync({
      title: 'Ionic',
      icon: 'icon',
      animation: 'DROP',
      position: {
        lat: this.lattitude,
           lng: this.longitude
      }
    });
    marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(() => {
      alert('clicked');
    });
   }









 }



#12

Hi @a7mdFo2ad
Can you please console the response of the htttp request
The value of this.ClinicData


#13

29%20PM


#14

parse them to float. and try loading map once you get response

import { Http                                                                                                 } from '@angular/http'                 ;
import { Component, ViewChild, ElementRef                                                                                    } from '@angular/core'                 ;
import { NavController  ,NavParams,Platform,AlertController, ToastController                              } from 'ionic-angular'                 ;
import { CallNumber                                                                                           } from '@ionic-native/call-number'     ;
import { StatusBar                                                                                            } from '@ionic-native/status-bar'      ;
import { GoogleMaps ,GoogleMap,GoogleMapsEvent,GoogleMapOptions,CameraPosition,MarkerOptions,Marker,LatLng} from '@ionic-native/google-maps'     ;
import { LaunchNavigator                                                                                      } from '@ionic-native/launch-navigator';
// declare var google: any;
@Component({
  selector: 'page-clinic-profile',
  templateUrl: 'clinic-profile.html',
})
export class ClinicProfilePage {
  map: GoogleMap;




  public  ClinicData    : any    ;
  id            : string ;
  user_id = JSON.parse(localStorage.getItem('loginData')).id;
  public lattitude : any ;
  public  longitude : any  ;




  constructor(
    public Http: Http,
    private :GoogleMaps : GoogleMaps,
 {

     let id : string = this.navParams.get('id');


        this.Http.post(api, { isEnglish : 1 , id :id ,user_id : this.user_id})
         .map(res => res.json())
         .subscribe(data => {
           this.ClinicData = data[0];
           
           this.longitude = parseFloat(this.ClinicData.long);
           this.lattitude = parseFloat(this.ClinicData.lat);

          console.log(this.longitude )
          console.log(this.lattitude )
          this.DisplayMap();
        },
        err => {
          console.log(err)
        })
      }
    }
    ionViewDidLoad() {


    }



    DisplayMap() {

      let mapOptions: GoogleMapOptions = {
      camera: {
         target: {
           lat: this.lattitude,
           lng: this.longitude
         },
         zoom: 18,
         tilt: 30
       },
  };

    this.map = GoogleMaps.create('map_canvas', mapOptions);

    let marker: Marker = this.map.addMarkerSync({
      title: 'Ionic',
      icon: 'icon',
      animation: 'DROP',
      position: {
        lat: this.lattitude,
           lng: this.longitude
      }
    });
    marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(() => {
      alert('clicked');
    });
   }

#15

Hi @a7mdFo2ad
Is the Clinic data is an array?
Try to loop the array

this.ClinicData=data;
for(let items of this.ClinicData){
        this.longitude=items.lon;
        this.lattitude=items.lan;
}

#16

app crashed after map initialized


#17

no it’s object not a array


#18

Then What is this ?
this.ClinicData = data[0];


#20

defining the data i’m getting from HTTP request


#21

Please don’t recommend setTimeout to “solve” race conditions. It’s inefficient, will behave inconsistently, and at best will deliver only an illusion of fixing the underlying problem.