# Google Map not showing in second time

**URL:** <https://forum.ionicframework.com/t/google-map-not-showing-in-second-time/101402>\
**Category:** Ionic Native\
**Created:** [August 9, 2017, 10:36am UTC](https://forum.ionicframework.com/t/google-map-not-showing-in-second-time/101402 "2017-08-09T10:36:36Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![liyou44](https://avatars.discourse-cdn.com/v4/letter/l/e274bd/32.png) [@liyou44](https://forum.ionicframework.com/u/liyou44)\
**Post date:** [August 9, 2017, 10:36am UTC](https://forum.ionicframework.com/t/google-map-not-showing-in-second-time/101402/1 "2017-08-09T10:36:36Z")

</div>

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:

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

        });
    }
}

```

---

<div class="post-metadata">

**Author:** ![MattE](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/matte/32/66712_2.png) [@MattE](https://forum.ionicframework.com/u/MattE)\
**Post date:** [August 9, 2017, 11:59am UTC](https://forum.ionicframework.com/t/google-map-not-showing-in-second-time/101402/2 "2017-08-09T11:59:35Z")

</div>

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/](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.

---

<div class="post-metadata">

**Author:** ![liyou44](https://avatars.discourse-cdn.com/v4/letter/l/e274bd/32.png) [@liyou44](https://forum.ionicframework.com/u/liyou44)\
**Post date:** [August 9, 2017, 3:59pm UTC](https://forum.ionicframework.com/t/google-map-not-showing-in-second-time/101402/3 "2017-08-09T15:59:18Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![balubharadwaj](https://avatars.discourse-cdn.com/v4/letter/b/d6d6ee/32.png) [@balubharadwaj](https://forum.ionicframework.com/u/balubharadwaj)\
**Post date:** [January 17, 2018, 8:02am UTC](https://forum.ionicframework.com/t/google-map-not-showing-in-second-time/101402/4 "2018-01-17T08:02:54Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![derman10](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/derman10/32/123022_2.png) [@derman10](https://forum.ionicframework.com/u/derman10)\
**Post date:** [August 13, 2020, 10:30pm UTC](https://forum.ionicframework.com/t/google-map-not-showing-in-second-time/101402/5 "2020-08-13T22:30:45Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 19, 2021, 8:54pm UTC](https://forum.ionicframework.com/t/google-map-not-showing-in-second-time/101402/6 "2021-07-19T20:54:16Z")

</div>