Google Maps doesn't display after click on the same Page

Ionic Framework ionic-v3
1

Hi guys,

  1. Click on GoogleMap page
  2. Open Sidemenu and click again on the same page (GoogleMap page)
  3. Page gets blank

ionViewDidLoad() {
this.loadMap();
}

loadMap() {
let element = document.getElementById(‘map’);
let map: GoogleMap = this.googleMaps.create(element, {});
let latlng = new LatLng(40.730610, -73.935242);

  map.one(GoogleMapsEvent.MAP_READY).then(() => {
      let position: CameraPosition = {
          target: latlng,
          zoom: 10,
          tilt: 30
      }
      map.moveCamera(position);
  })

}

Hope someone can help :slight_smile:

2

It may be an issue with transparency. I had some similar issue. Why don’t you remove the map when closing the page ?

ionViewDidLeave(){
	    this.map.remove();
	}

And create the map again when the page si opened again ?

If this happens when you open the page twice, without closing it, why opening the map twice ?

3

thanks for your reply,

doesn’t work

I think this will remove the map if I leave the page and click on another but I want the map to refresh if i click the same page twice.

4

What do you mean by “the map to refresh”, what data do you want to refresh ? I had this kind of issue a while ago. I had a map on a page, and if I went back to the previous page and go again on the map page, without removing it, the map disappeared. I think it has something to do with CSS, try to find something about that.

But what does your code do when you click again on the map page link ? It opens a second page with another map ? Or stay on the same page but refresh data ?

5

or you run


 this.zone.run(() => {
            google.maps.event.trigger(this.map, 'resize');
}
6

When I click on the map page link again it stays on the same page but without the GoogleMaps (page gets blank). But when I go on antoher page and then on my map page it shows everything fine. The blank page comes when I click on my map page link twice. Is there a way i can fix that ?

  1. App gets loaded
  2. Open Sidemenu and click on Map page link
  3. Map page opens with the GoogleMaps
  4. Open Sidemenu and click again on Map page link
  5. Map page opens without GoogleMaps

sorry for bad english btw

7

Is the map loaded again when you click on the menu link for the second time ? I mean, is your function “loadMap” called every time you click on the link ? If it is, if your Google Map is initialized several times, it could be the problem.

8

I think it initialized several times thats why the page gets blank after i click map page again.

Is there a way I can fix that?

thanks for your help

10

Well, the best option is to not initialize the map several times. But it depends on why you need to click several times on the map link. If it is only to refresh data (like reset the data on the map), just use something like an event, don’t open the page again, don’t call your loadMap function again, just call a custom function that reset data.