Hello ,
I’m trying to implement a Google Map native with ionic v3.
Follow the instruction on ionic official web site and the map it’s not showing. After debugging in remote device it’s show no error.
Here is the code:
page.html
<ion-header>
<ion-toolbar>
<button ion-button menuToggle icon-only>
<ion-icon name='menu'></ion-icon>
</button>
<ion-title>
Sport's Map
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div #map id="map" style="height:100%;"></div>
</ion-content>
page.scss I tried to play with css property without sucess
/*ion-app._gmaps_cdv_ .nav-decor{
background-color: transparent !important;
}*/
page-principal{
/* #map {
height: 100%;
width: 100%;
} */
}
page.ts
I tried to change the ngAfterViewInit() with ionViewDidLoad()(as suggested in a previous forum topic)
but it shows just the google logo at the bottom page and didnt show the map.
It also block the sideMenu navigation.
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';
@Component({
selector: 'page-principal',
templateUrl: 'principal.html',
})
export class PrincipalPage {
constructor(private googleMaps: GoogleMaps, public menuCtrl: MenuController, public navCtrl: NavController, public navParams: NavParams, public platform: Platform) {
//this.menuCtrl
/*platform.ready().then(()=>{
this.loadMap();
}); */
}
// Load map only after view is initialized but when it's used nav is not working with side menu
ionViewDidLoad(){
this.loadMap();
}
loadMap() {
// make sure to create following structure in your view.html file
// and add a height (for example 100%) to it, else the map won't be visible
// <ion-content>
// <div #map id="map" style="height:100%;"></div>
// </ion-content>
// create a new map by passing HTMLElement
let element: HTMLElement = document.getElementById('map');
let map: GoogleMap = 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
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: 18,
tilt: 30
};
// move the map's camera to position
map.moveCamera(position);
// create new marker
let markerOptions: MarkerOptions = {
position: ionic,
title: 'Ionic'
};
map.addMarker(markerOptions)
.then((marker: Marker) => {
marker.showInfoWindow();
});
}
}
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';
@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) {
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) {
// Reset the content nav to have just this page
// we wouldn't want the back button to show in this scenario
//this.nav.setRoot(page.component);
// i tried this but it doesn't solve the problem
//this.nav.push(page.component);
this.rootPage = page.component;
}
}
Thanks a lot for your help!