Google maps won't display on tab switch

[felzend]

I'm using this one:

• https://github.com/aaronksaunders/ionic2GMapNative

If I put the map on first tab, it will show, but if I switch to the second and come back to the first tab, map won't show anymore and second tab content will still be shown above first's content (if I write a text), but map won't show anyway.

....

[brandyscarney]

I think this is more of an issue with that project and not Ionic itself. Please create an issue on that repository. We have a conference app that uses a Google map in a tab and it works correctly: https://github.com/driftyco/ionic-conference-app

If you're having issues with your own project I recommend asking on the forums: https://forum.ionicframework.com/

Thanks!

[qingfx]

@brandyscarney I think this issue is about the native component from 'ionic-native' which utilizes Google Maps mobile SDK (which is used in the example of the issue) instead of Google Maps Javascript SDK (which is used in this conference app).

[brandyscarney]

Thanks @560889223, I'll reopen this to look at it!

[felzend]

I'd suggest to make it work through javascript again like before, it was much more easier than now, and actually the one I posted above is bugged. So if it get solved, will be awesome

[qingfx]

@Fel486
If you are referring to Google Maps Javascript SDK, then the fore-mentioned conference app is a great starting point. Google Maps mobile SDKs, which is native to respective platforms (ios/android), have their own advantages and it's good to have both as options, i.g. using JS SDK for web and mobile SDKs for app experience.

@brandyscarney
Personally I found today's experience for integrating native Google Maps are not so straightforward to say the least. Even with ionic-angular@nightly as suggested from #7157, I have to hack the navigation behavior to correctly display the map page.

The specific issue is that with app code from https://github.com/560889223/ionic2-google-maps (a fork of ZiFFeL1992) and ionic-angular@2.0.0-beta.10 (or ionic-angular@nightly, 20160713-something at the time of writing), when pushing the map page onto the navigation stack, the previous page were left in device screen, overlapping map page, as shown in this screenshot.

I have figured out a way to hack current paging behavior to get correct result (as below), but I'd like to see if there is more through-thought solution out there and make it into official code base.

export class HomePage {
  // Collapsing other stuff ...

  openMap() {
    const useHack = true;
    if (!useHack) {
      this.nav.push(MapPage);
    } else {
      this.ionContent.getNativeElement().hidden = true;
      this.nav.push(MapPage)
        .then(() => {
          const subscription = this.nav.viewWillEnter.subscribe(() => {
            this.ionContent.getNativeElement().hidden = false;
            subscription.unsubscribe();
          });
        });
    }
  }
}

[JaimeMolina87]

Has some one solution to that problem with tabs/modals?

[infinitysky]

Hi all, this problem still affect on my project.
This strange problem happens on both of Android and iOS.
I am using ionic 2 and cordova google map plugin now

Here is my development environment:
Cordova CLI: 6.3.0
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.10
Ionic CLI Version: 2.0.0-beta.37
Ionic App Lib Version: 2.0.0-beta.20
ios-deploy version: 1.8.6
ios-sim version: 3.1.1
OS: Mac OS X El Capitan
Node Version: v4.4.3
Xcode version: Xcode 7.3 Build version 7D175

I have to enable the scss code for nav-decor

ion-app._gmaps_cdv_ .nav-decor{
  background-color: transparent !important;
}

I have to say yes it works for me temporarily. However, on my project, I have got multiple tabs then it cause the following problem:
After I boot up the application, It looks OK.

However, once I am going to other tab and back. It shows me this screen.

Other screen:

back to map:

These two screens have been puts together, and the google map is missing....

Anybody have ideas to help me gets out of this "hole" please?

there is my code for map:

import {Component} from "@angular/core";
import {NavController, Platform} from 'ionic-angular';
import {GoogleMap, GoogleMapsEvent, GoogleMapsLatLng, GoogleMapsMarkerOptions,Geolocation} from 'ionic-native';

@Component({
  templateUrl: 'build/pages/maps/maps.html'
})

export class MapsPage {
  private map: GoogleMap;

  constructor(private _navController: NavController,private platform: Platform) {
    this.platform.ready().then(() => this.onPlatformReady());
  }
  private onPlatformReady(): void {
    GoogleMap.isAvailable().then(() => {
      this.map = new GoogleMap('map_canvas');
      this.map.one(GoogleMapsEvent.MAP_READY).then((data: any) => {
        let myPosition = new GoogleMapsLatLng(38.9072, -77.0369);
        console.log("My position is", myPosition);
      });
      this.map.setBackgroundColor("white");
      this.map.setMyLocationEnabled(true);
    });
  }
}

html :

<ion-header>
  <ion-navbar>
    <ion-title>
      Maps View
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <h2>hihi</h2>
    <div id="map_canvas">

    </div>
</ion-content>

scss file

.maps {

}
ion-app._gmaps_cdv_ .nav-decor{
  background-color: transparent !important;
}

[jgw96]

Hello all! Is this still an issue?

[jgw96]

Hello all! As it seems it has been a while since there was any activity on this issue i will be closing it for now. Feel free to comment if you are still running into this issue. Thanks for using Ionic!

[gloventRehan]

@560889223 is on the right track, see my solution below:

If you are on a Map Page, click on another tab (Second Page) ,then ionic does set the new tab as root, but
for some reason, leaves the DOM of that page just as is. So now if navigate to Map Page again, the div will allready be "transformed" by the plugin
and that is why you see the MAP_READY event never fires again. So I tried to do a .clear() and .remove on the map object if it is defined,
also tried to remove the div if it has been made a map, but nothing worked.

So to remedy this because I think ionic drops the ball after it removes the map page from the navstack, delete the map page DOM if it exists
when you are on the Second Page, before navigating back to the Map page.

So do this before navigating to the Map Page from the Second Page:

if( typeof (document.getElementsByTagName("page-meter-map")[0]) != 'undefined' )
    (document.getElementsByTagName("page-meter-map")[0]).parentElement.removeChild( (document.getElementsByTagName("page-meter-map")[0]) )

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.