Click on SideMenu is not recognized

I have an sidemenu but when I click on a link inside it’s the google map that receive the click-

For example If I click on Sport’s Filter the map will zoom and i can’t go to sport filter page.

Thanks for all your advice!

app.html the sidemenu

<ion-menu [content]="content" [persistent]="true">

      <button menuClose ion-item *ngFor="let p of pages" (tap)="openPage(p)">


<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>


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';

  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.
    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
    // i tried this but it doesn't solve the problem
      this.rootPage = page.component;

googlemap controller

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';

    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) {
       /* platform.ready().then(()=>{
        }); */

     ionViewDidEnter() {

    loadMap() {

        // 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
            () => {
                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

        // create new marker
        let markerOptions: MarkerOptions = {
            position: ionic,
            title: 'Ionic'

            .then((marker: Marker) => {

Just did some browsing on the internet!
But couldn’t find the answer to my problem, could any of you help me please ?

Maybe this could be of help?

1 Like

thanks for your response!
It’s working like a charm!
It explain me the publish and subscribe event in angular

1 Like