Google Map not showing in second time

Ionic Native
1

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');
                });
            }

        });
    }
}
2

First of all, please remove all the code that isn’t initialising variables from your constructor to another function.
This is bad programming practice.

Secondly: use the function with the name ionViewWillEnter.
This is part of the ionic lifecycle event (read more here: https://ionicframework.com/docs/api/navigation/NavController/)

The problem is that your page is cached and the code in the constructor doesn’t execute when the page is shown again.
Using ionViewWillEnter, your code in that function will be executed everytime the page is shown.

3

Thank you for your answer, but I found the source of my problem when I remove marker.setIcon() the map show up normally with default markers.

4

still map was not loading.

ionViewWillEnter() {
this.loadMap();
}

loadMap() {
console.log(“map function loded”)
this.airconeProvider.getUserComments()
.then(res => {
this.comments = res;
var locations = [];
this.comments.forEach(element => {
if (element.coords) {
locations.push(element.coords)
}
});
console.log(“locations taking”)

  let mapOptions: GoogleMapOptions = {
    camera: {          
    // target: {
    //   lat: 33.80010128657071,
    //   lng: -151.28747820854187
    // },
      zoom: 18,
      tilt: 30
    }
  };

  this.map = GoogleMaps.create('map', mapOptions);

  this.map.one(GoogleMapsEvent.MAP_READY)
    .then(() => {
      console.log("entered into maps")
        for (var i = 0; i < locations.length; i++) {
          this.map.addMarker({
              title: locations[i].latitude,
              icon: 'blue',
              animation: 'DROP',
              position: {
                lat: locations[i].latitude,
                lng: locations[i].longitude
              }
            })
            .then(marker => {
              console.log("ok")
              marker.on(GoogleMapsEvent.MARKER_CLICK)
                .subscribe(() => {
                  alert('exixtent user');
                });
            });
          }
      
    });
  });
}
5

i have the same problem with ionic 4.
At the second try, map don’t was loaded.
Any solution?