Click on SideMenu is not recognized

Hello,
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">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>


  <ion-content>
    <ion-list>
      <button menuClose ion-item *ngFor="let p of pages" (tap)="openPage(p)">
        {{p.title}}
      </button>
    </ion-list>
  </ion-content>

</ion-menu>

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

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

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

@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();
        }); */
    }

    
     ionViewDidEnter() {
            this.loadMap();
    } 


    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
        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();
        });
    }
}

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