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();
})
}
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
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
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.
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);
not fixed. but initialised.
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
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
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
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);
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');
});
}
}
Hi @a7mdFo2ad
Can you please console the response of the htttp request
The value of this.ClinicData
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');
});
}
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;
}
app crashed after map initialized
no it’s object not a array
Then What is this ?
this.ClinicData = data[0];
defining the data i’m getting from HTTP request
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.
