Buttons above native Google maps do not work after opening a new page and returning to the map page (IONIC 5)

Ionic Framework
1

I have a button on top of the google maps map and when I start the page the button works correctly, but when I change the page and return to the map page, I cannot click the button, it is as if it were not present and it is executed the map click event

<ion-content>

  <div id="map_canvas"></div>

  <ion-button 
      (click)="app.statusApp= 'OFFER_TO_DRIVER'" 
      class="btn-request-car"
      *ngIf="app.statusApp == 'HOME' ||  app.isDestinitySelected" 
      size="large" 
      shape="round">

      Order a car

  </ion-button>

</ion-content>

#map_canvas {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  background: rebeccapurple;

  &.blur {
    filter: blur(8px);
  }
}

.btn-request-car {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 40px;
  width: 85%;
  height: 70px;
  text-transform: capitalize;
  z-index: 20;
}
2

This is a rather unusual and trouble-prone event handler. Please check the JavaScript console for any uncaught exception or other error messages.

1 Like
3

I understand your suggestion, but the problem is not when I press the ion-button.

The problem occurs when I change the page. For example when I change the page in the ion-menu. And when returning to the map the app begins to have the aforementioned problems

4

I understand your question, but I never said the problem was caused by you pressing the button.

I asked you to check the JavaScript console for uncaught exceptions and other error messages. If you’re telling me “there are none”, then there isn’t anything else constructive I can say until you provide public access to an MCVE somewhere like GitHub or Gitlab that others can use to reproduce your problem.

1 Like