Hi,
I create a page that shows the map. It works for the first time but when I navigate and go back to the map page, it shows nothing and there is no error.
i have installed cordova-plugin-googlemaps v2 beta and here my script:
import { Component, NgZone } from '@angular/core';
import { IonicPage, Platform, NavController, Events, PopoverController, LoadingController } from 'ionic-angular';
import { GoogleMaps, GoogleMapsEvent, GoogleMapOptions, LatLng, CameraPosition } from '@ionic-native/google-maps';
import { RestaurantService } from '../../providers/restaurant-service';
import { RestaurantDetails } from './restaurants-details/restaurant-details';
@IonicPage()
@Component({
selector: 'page-map',
templateUrl: 'map.html',
})
export class Map {
menuClicked: boolean;
selected_restaurant: any;
restaurants: any;
tab: string = 'map';
map: any;
restaurantDetails: any = RestaurantDetails
load: any;
constructor(
public navCtrl: NavController,
public popoverCtrl: PopoverController,
public events: Events,
private zone: NgZone,
private googleMaps: GoogleMaps,
public restaurant_service: RestaurantService,
public platform: Platform,
private loading: LoadingController
) {
this.restaurants = null;
this.menuClicked = false;
this.map = null;
this.selected_restaurant = null;
this.load = this.loading.create({
content: 'Veuillez patienter...'
});
this.load.present();
this.events.subscribe('menu:opened', () => {
if (this.map !== null) {
this.map.setClickable(false);
}
this.stateMenu(true)
});
this.events.subscribe('menu:closed', () => {
if (this.map !== null) {
this.map.setClickable(true);
}
this.stateMenu(false)
});
this.platform.ready().then(() => {
this.loadRestaurants();
});
}
loadRestaurants() {
this.restaurant_service.load().then(data => {
this.restaurants = data;
this.loadMap();
});
}
private stateMenu(state) {
this.zone.run(() => {
this.menuClicked = state;
});
}
loadMap() {
let self = this;
let element: HTMLElement = document.getElementById('quick_map');
let mapOptions: GoogleMapOptions = {
camera: {
target: {
lat: 33.536725,
lng: -7.595685
},
zoom: 7,
tilt: 30
}
};
this.map = this.googleMaps.create(element, mapOptions);
let restaurants = this.restaurants;
this.map.one(GoogleMapsEvent.MAP_READY).then(() => {
self.load.dismiss();
for (let restaurant of restaurants) {
let restaurant_position: LatLng = new LatLng(parseFloat(restaurant.latitude), parseFloat(restaurant.longitude));
this.map.addMarker({ position: restaurant_position })
.then((marker) => {
marker.setIcon('./assets/images/map/pin.png');
});
}
});
}
}