After a lot of fight with the plugin. i did manage with help to display my google map!
if it’s called from the login page with
this.navCtrl.setRoot(PrincipalPage);
It show a General map without marker!
If it’s called from the side menu:
this.rootPage = page.component;
it show the proper map with the marker!
I tried to do the same navigation system in my login page and on my side menu.
But it didn’t work!
app.component.ts
import { Component, ViewChild } from '@angular/core';
import { Nav, Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { AuthPage } from '../pages/auth/auth';
import { PrincipalPage } from '../pages/principal/principal';
import { SportfilterPage } from '../pages/sportfilter/sportfilter';
import { Events } from 'ionic-angular';
@Component({
templateUrl: 'app.html'
})
export class MyApp {
@ViewChild(Nav) nav; Nav;
rootPage:any = AuthPage;
pages: Array<{title: string, component: any}>;
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, private events: Events) {
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
statusBar.styleDefault();
splashScreen.hide();
});
this.pages = [
{ title: 'Sport\'s Map', component: PrincipalPage },
{ title: 'Sport\'s Filter', component: SportfilterPage },
];
}
openPage(page) {
this.rootPage = page.component;
}
menuClosed() {
this.events.publish('menu:closed', '');
}
menuOpened() {
this.events.publish('menu:opened', '');
}
}
previouspage.ts
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Facebook, FacebookLoginResponse } from '@ionic-native/facebook';
import {PrincipalPage} from '../principal/principal';
@Component({
selector: 'page-auth',
templateUrl: 'auth.html'
})
export class AuthPage {
userData: any;
constructor(public navCtrl: NavController,private facebook: Facebook) {
}
loginWithFB() {
//this.navCtrl.push(PrincipalPage);
this.navCtrl.setRoot(PrincipalPage);
/*this.facebook.login(['email', 'public_profile']).then((response: FacebookLoginResponse) => {
this.facebook.api('me?fields=id,name,email,first_name,picture.width(720).height(720).as(picture_large)', []).then(profile => {
this.userData = {email: profile['email'], first_name: profile['first_name'], picture: profile['picture_large']['data']['url'], username: profile['name']}
});
}); */
}
gmap.ts
import { Component } from '@angular/core';
import { NavController, NavParams, MenuController,Platform } from 'ionic-angular';
import { GoogleMaps, GoogleMap, GoogleMapsEvent, LatLng, CameraPosition, MarkerOptions, Marker } from '@ionic-native/google-maps';
import { Events } from 'ionic-angular';
@Component({
selector: 'page-principal',
templateUrl: 'principal.html',
})
export class PrincipalPage {
map: GoogleMap;
constructor(private events: Events,private googleMaps: GoogleMaps, public menuCtrl: MenuController, public navCtrl: NavController, public navParams: NavParams, public platform: Platform) {
this.events.subscribe('menu:opened', () => {
this.map.setClickable(false);
});
this.events.subscribe('menu:closed', () => {
this.map.setClickable(true);
});
}
ionViewDidEnter() {
this.loadMap();
}
loadMap() {
let element: HTMLElement = document.getElementById('map');
this.map = this.googleMaps.create(element);
// listen to MAP_READY event
// You must wait for this event to fire before adding something to the map or modifying it in anyway
this.map.one(GoogleMapsEvent.MAP_READY).then(
() => {
console.log('Map is ready!');
// Now you can add elements to the map like the marker
}
);
// create LatLng object
let ionic: LatLng = new LatLng(43.0741904, -89.3809802);
// create CameraPosition
let position: CameraPosition = {
target: ionic,
zoom: 100,
tilt: 10
};
// move the map's camera to position
this.map.moveCamera(position);
// create new marker
let markerOptions: MarkerOptions = {
position: ionic,
title: 'Ionic'
};
this.map.addMarker(markerOptions)
.then((marker: Marker) => {
marker.showInfoWindow();
});
}
}
Thanks a lot for your help!