My map takes long before loading after navigating from another page.
kennedyngigi4 opened this issue · comments
I have a problem, my map is in the home page and I have other pages eg: favorites, support etc.
If I navigate from example: favorites to home the map takes more than a minute before loading.
What could be the issue?
here is part of the code.
ngOnInit() {
this.getRegisteredPartners();
}
getRegisteredPartners(){
this.mapservice.getPartners().subscribe((partnerData) => {
this.registeredPartners = partnerData.map((data) => {
return{
id: data.payload.doc.id,
location: data.payload.doc.data()['bizLocation'],
lat: data.payload.doc.data()['Lat'],
lng: data.payload.doc.data()['Lng'],
mobile: data.payload.doc.data()['mobile'],
title: data.payload.doc.data()['name'],
registration: data.payload.doc.data()['registered'],
verified: data.payload.doc.data()['active_state'],
garaPic: data.payload.doc.data()['garaPicture'],
infoDesc: data.payload.doc.data()['infoDesc'],
weekdays: data.payload.doc.data()['weekdays'],
sat: data.payload.doc.data()['sat'],
sun: data.payload.doc.data()['sun'],
icon: data.payload.doc.data()['icon'],
mainservice: data.payload.doc.data()['myService']
}
});
this.loadMap();
})
}
loadMap(){
let options: GoogleMapOptions = {
zoom: 13,
controls: {
'compass': false,
'indoorPicker': true,
'mapToolbar': true,
'myLocation': true,
'myLocationButton': true,
'zoom': true,
},
}
this.map = GoogleMaps.create('map_canvas', options);
this.map.on(GoogleMapsEvent.MAP_READY).subscribe((success) => {
//remove google maps labels and markers;
let styles = {
hide: [
{
featureType: 'poi.business',
stylers: [{visibility: 'off'}]
},
{
featureType: 'transit',
elementType: 'labels.icon',
stylers: [{visibility: 'off'}]
}
]
}
this.map.setOptions({ styles: styles['hide']});
this.checkGPSPermission();
});
}
Map is not a HTML element, it's a native view.
It takes little time to prepare many things.
You can create a map without
attaching map div, then involve map.setDiv()