Я использую Maps API внутри моего приложения Ioni c 4.
Карта инициализируется при вызове компонента и работает хорошо! Но когда я закрываю и снова открываю компонент, карта становится серой, а масштаб - удаленным. Когда я пролистываю карту, она появляется снова, но мне все равно приходится сильно увеличивать масштаб до go на маркерах.
ngAfterViewInit() {
this.getGoogleMaps()
.then(googleMaps => {
this.googleMaps = googleMaps;
const mapEl = this.mapElementRef.nativeElement;
this.geocoder = new google.maps.Geocoder();
this.map = new googleMaps.Map(mapEl, {
center: this.center,
zoom: 17,
disableDefaultUI: true
});
this.googleMaps.event.addListenerOnce(this.map, "idle", () => {
this.renderer.addClass(mapEl, "visible");
});
if (!this.selectable) {
const marker = new googleMaps.Marker({
position: this.center,
map: this.map,
title: this.title,
icon: {
'url': '../../assets/icons/map-pin.png'
},
animation: google.maps.Animation.DROP
});
marker.setMap(this.map);
}
// show preview
if (this.previewPlace) {
this.selectedPlace = this.previewPlace;
this.focus();
}
})
.catch(err => {
console.log(err);
});
}
private getGoogleMaps(): Promise<any> {
const win = window as any;
const googleModule = win.google;
if (googleModule && googleModule.maps) {
return Promise.resolve(googleModule.maps);
}
return new Promise((resolve, reject) => {
const script = document.createElement("script");
script.src =
"https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxx";
script.async = true;
script.defer = true;
document.body.appendChild(script);
script.onload = () => {
const loadedGoogleModule = win.google;
if (loadedGoogleModule && loadedGoogleModule.maps) {
resolve(loadedGoogleModule.maps);
} else {
reject("Google Maps SDK not available!");
}
};
});
}
