hi guys.
in this code I try to get get Lat and Lang of location from Json file to feed initializeMap() but everyehre i placed this function initializeMap() was loaded early.
and LLat and LLan were get value later. there fore map was not loaded.
import 'rxjs';
import { Http, Response } from '@angular/http';
import { Component, ViewChild, ElementRef } from '@angular/core';
import { Platform,NavController } from 'ionic-angular';
import { Geolocation } from 'ionic-native';
declare var google;
@Component({
selector: 'page-map',
templateUrl: 'map.html'
})
export class MapPage {
@ViewChild('map') mapElement: ElementRef;
map: google.maps.Map;
locimg= 'ion-ios-location';
public locate:any;
public LLat;
public LLan;
constructor( public nav: NavController, private platform: Platform,private http: Http) {
this.map = null;
this.platform.ready().then(() => {
this.initializeMap();
});
}
loadlocation(){
this.locate=this.http.get('cablocation.json')
.map(res => res.json())
.subscribe(locate =>{
this.locate = locate.items;
this.LLat=this.locate[0].location_lat;
this.Lang=this.locate[0].location_lan;
console.log(this.LLat,'lat');
console.log(this.LLan,'lang');
});
}
initializeMap() {
this.loadlocation();
console.log('initializeMap');
let minZoomLevel = 3;
this.map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: minZoomLevel,
center: new google.maps.LatLng(this.LLat,this.LLan),
mapTypeControl: false,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
addMarker(){
let marker = new google.maps.Marker({
map: this.map,
animation: google.maps.Animation.DROP,
position: this.map.getCenter()
});
let content = "<h4>some info!!!</h4>";
this.addInfoWindow(marker, content);
}
addInfoWindow(marker, content){
let infoWindow = new google.maps.InfoWindow({
content: content
});
google.maps.event.addListener(marker, 'click', () => {
infoWindow.open(this.map, marker);
});
}
}