Cordova google maps not clickable with ion-grid layer of buttons and labels

@vivekh wrote:

Hi,
I’m trying to create an Ionic 3 app with a full screen cordova google maps with buttons and labels as a layer on top of the map. I would like to associate click events to the buttons and labels. Also, the map underneath should be clickable wherever the map is not covered by buttons or labels. I used ion-grid for my button and labels layout along with a standard div for the map. Right now, the button and labels are generating click events. But, the map below is not clickable, i.e., for example, I can’t move the map if I touch it. I tried google search, stackoverflow & ionic forum search for a combination of ion-grid layout and google maps usage without much success. Here’s my home.html code…

<ion-content class="home">
  <div #map id="map" style="height:100%;">
    <ion-grid>
      <ion-row style="flex:1;">
        <button ion-button icon-only (click)="openMenu()">
          <ion-icon name="menu">
          </ion-icon>
        </button>

      </ion-row>
      <ion-row style="flex:1;">
        <ion-col col-1>
        </ion-col>
        <ion-col col-8>
          <ion-item>
            <ion-label (click)="onStartLocation()">Start Location</ion-label>
          </ion-item>
        </ion-col>
      </ion-row>
      <ion-row style="flex:4;">
      </ion-row>
      <ion-row style="flex:1;">
        <ion-col col-5>
        </ion-col>
        <ion-col>
          <ion-item>
            <ion-label (click)="onEndLocation()">End Location</ion-label>
          </ion-item>
        </ion-col>
      </ion-row>
      <ion-row style="flex:1;">
      </ion-row>
    </ion-grid>
  </div>

</ion-content>

Right now, the full map with 2 labels and a button get displayed. I can even click on the labels and the button when the above mentioned functions get called. But, the map is not clickable and doesn’t respond to touch events. How do I make the map clickable wherever it is not covered by button and labels?

Posts: 1

Participants: 1

Read full topic