Created Ionic 2 Native map following Josh Morony tutorial:
http://www.joshmorony.com/integrating-native-google-maps-into-an-ionic-2-application/ .
Everything works well. Here's the problem:
My view have a side menu, when I click on side menu, it toggles appear, but the options inside are unclickable. When I double click the menu option in emulator, the map zoomed in. The map has overlapped my side menu, is there any solution for this emergency?
Thank you.
it is expected behaviour according to the plugin documentation, what you need to do is when sidebar is opened - map.setClickable(false), then when it closes turn back the clickable to true.
For example, let's presume that the menu is on the main component, so u do something like this in the template (app.html):
<ion-menu #sidebar [content]="content" (ionOpen)="onMenuOpen($event)" (ionClose)="onMenuClose($event)">
in app.ts or however it is called for you
onMenuOpen(event) {
this.events.publish('sidebar:open');
}
onMenuClose(event) {
this.events.publish('sidebar:close');
}
then on the map component u attached a listener when the map is ready:
map.one(GoogleMapsEvent.MAP_READY).then(() => {
this.events.subscribe('sidebar:open', () => {
map.setClickable(false);
});
this.events.subscribe('sidebar:close', () => {
map.setClickable(true)
});
and probably unsubscribe when the page is closed:
ionViewWillLeave() {
this.events.unsubscribe('sidebar:open');
this.events.unsubscribe('sibebar:close');
}
do not forget to
import { Events } from 'ionic-angular';
and inject the events in each component constuctor
constructor(
private events: Events
) {
hope that helps.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With