I have developed an Ionic V2 side menu application and incorporated a GMaps element into it. However, I am facing issues with handling elements that appear in front of the map. The buttons on the side menu become disabled when they are overlapped by the map, and the same issue occurs with the pop-up of an Ionic select element.
Therefore, my question is: what mistake am I making? Why am I unable to interact with any element that appears in front of the Google map?
The specific area in red that I cannot handle is shown below:
https://i.sstatic.net/IghqT.png https://i.sstatic.net/M9riZ.png
This is the HTML code for my map:
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Carte</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-row center>
<ion-col width-25 center>
<ion-label>Jours :</ion-label>
</ion-col>
<ion-col width-25 center>
<ion-select [(ngModel)]="gender">
<ion-option value="f" selected="true">Female</ion-option>
<ion-option value="m">Male</ion-option>
</ion-select>
</ion-col>
<ion-col width-25 center>
<ion-label>Horaires :</ion-label>
</ion-col>
<ion-col width-25 center>
<ion-select [(ngModel)]="gender">
<ion-option value="f" selected="true">Female</ion-option>
<ion-option value="m">Male</ion-option>
</ion-select>
</ion-col>
</ion-row>
<div #map id="map" style="height:90%;"></div>
</ion-content>
This is the TypeScript code for my map:
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { GoogleMap, GoogleMapsEvent, GoogleMapsLatLng, CameraPosition, GoogleMapsMarkerOptions, GoogleMapsMarker } from 'ionic-native';
@Component({
selector: 'page-gmap',
templateUrl: 'gmap.html'
})
export class GMap {
constructor(public navCtrl: NavController) {}
ngAfterViewInit() {
this.loadMap();
}
loadMap() {
let element: HTMLElement = document.getElementById('map');
let map = new GoogleMap(element);
// listen to MAP_READY event
map.one(GoogleMapsEvent.MAP_READY).then(() => console.log('Map is ready!'));
// create LatLng object
let ionic: GoogleMapsLatLng = new GoogleMapsLatLng(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: GoogleMapsMarkerOptions = {
position: ionic,
title: 'Ionic'
};
map.addMarker(markerOptions).then((marker: GoogleMapsMarker) => {
marker.showInfoWindow();
});
}
}