Blank Google Maps after navigation


#1

Hi,
still working on an app with google maps.

On initial load the google map shows up fine, but after navigating through a couple of pages using this.nav.push() and returning to the main view, the map is blank.

I have tried moving the map-initialization code into its own MapsProvider, where I keep the map in a variable and return it during ngOnInit() but this still does not help.

// MapsProvider.ts

map: google.maps.Map = null;

loadMap(mapCanvas?, center?) {
  if (this.map) {
    return this.map;
  }

  let mapOptions: google.maps.MapOptions = {
    mapTypeControl: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: center,
    zoom: 16,
    disableDefaultUI: true,
    streetViewControl: false
  };

  this.map = new google.maps.Map(mapCanvas, mapOptions);
  return this.map;
}



// MainPage.ts
ngOnInit() {
  let warszawa = { lat: 52.13, lng: 21 };
  this.maps.loadMap(document.getElementById("map_canvas"), warszawa);
}

After some search on stackoverflow it is suggested to call google.maps.event.trigger(this.maps.loadMap(), 'resize');
but this also does not help.
It was also suggested to refresh the page but I don’t think this will make for a great user experience.

Has anybody else had this problem and maybe found a solution? Thanks


#2

Hi,
How did you get it to work in TS?

Thank you.


#3

Sounds like a CSS issue


#4

I just found similar issue. Map is tab page. Switch between tab pages are fine(No refresh) but switch page via menu (setRoot) make map blank


#5

A page with Googlemaps can only ONCE be set with setRoot(). The next time you set it to root again it will be grey.

I have an app where the first page (After login) is Google maps, then you navigate through a couple of pages and go back again to MapsPage.
The solution for me was to use .popToRoot() on the last page, instead of setRoot(MapsPage).


#6

Where do you set poptoroot? in menu?

I wrap google map with .then() from conference app example. It works with menu navigation now. Still no idea what’s going on


#7

Hi all,

I’m really liking Ionic2 and plan to build my app with it. So far everything is working smooth except I have the same problem with my Google map not displaying after navigating to a different root page and then navigating back.
This problem also exists in the Ionic2 Conference App. I filed a issue for it in the conference app github repo but there has been no response after a few days:


I did get a +1 comment from another Ionic user on the issue though.

Pushing pages on the nav stack rather than changing the root page is not always an acceptable way to solve this issue. The problem seems to be due to the fact that pages in the nav stack are destroyed when changing the root page. It seems that it would be desirable to have the option to cache certain root pages so that they don’t always have to be completely reconstructed when navigating between different root pages. If I am completely off base on how root pages can and should be used please explain the design decision to destroy the nav stack when changing the root page.

I look forward to working with Ionic and contributing where I can!

Cheers


#8

Looking at the code I see that it’s using ionViewLoaded and loading the data/data.json to get the markers and center of the map. It should work, I have an App using that hook successfully. Do you get any error message on your console while loading it? or something weird in the Network requests?


#9

I have the same issue in my app. Not yet found how to solve it


#10

Matheo, have you tried changing your NavController root page and then setting the NavController root page back to your map page??
The ionViewLoaded hook works fine the first time but if you swap your NavController root page and then put your map page back on the NavController stack that is when the redrawing / rendering of the map tiles problem happens.


#11

No errors in the javascript console. No network errors loading files. No errors in the ionic serve output.
This seems to be a common problem for Google maps when it gets removed from the DOM and then recreated.
I don’t understand why Ionic has to destroy a NavController root page when another root page gets set… Root pages seem like they would be the most frequented pages / screens in an app. Why should they have to be destroyed and recreated every time? An option to cache root pages seems pretty sane… right?


Issue with Google Maps JavaScript API and ionic 2
#12

// resize map now
google.maps.event.trigger(map, ‘resize’);
map.setCenter(latLng);
map.setZoom(map.getZoom());

    // resize map when map is idle.
    google.maps.event.addListenerOnce(map, 'idle', function () {
        console.log("map idled, resizing");
        google.maps.event.trigger(map, 'resize');
        map.setCenter(latLng);
        map.setZoom(map.getZoom());
    }); // shouldn

#13

Hello

I have similar problem too.

I have 2 tabs where firs of them uses google maps plugin and second are just list page. On firs initialization everything are fine, but after switching between tabs the map is disappearing. After many searches i founded that the map layer are overlapped by second tab content. Very bad fix which i have at this moment are:
I set tab select event and i’m switching the second contents height’s to 0%. I will work on this tomorrow and maybe i will find better solution


#14

With Google Maps cordova plugin use

    ion-app._gmaps_cdv_ .nav-decor {
        background-color: rgba(0,0,0,0);
    }

#15

Thanks Hollywood for your reply, but yuor code not worked for me.

For me this code fix the problem:
ion-tab:not(.show-tab) ion-content { display: none; }


#16

Hi guys!

Did anyone make any progress on this issue? I didn’t find any solution yet. So I posted this issue on stackoverflow too.


#17

Hi there,
I also had this issue with ionic RC1.
To resolve it, had to use nav.setRoot to go back to the page that contains the map.
With nav.push() or nav.pop() I just get a blank map.


#18

i was having the same issue…

i put : cache-view=“false” in the ion-view tag , and it works fine

but it will initialize your map as first situation

like this :
ion-view view-title="" ng-init=“init()” cache-view=“false”>


#19

only popToRoot() and then do push(Page) can work for me, but it shows the rootPage first which is not very good.


#20

Check ionic conference app implementation:

https://github.com/driftyco/ionic-conference-app/blob/master/src/pages/map/map.ts

Follow it exactly and it should work.