Ion-fab-list button click not working

Ionic Framework ionic-v3
1

I am not sure why its not working because my code is perfect down to the documentation provided, but for some reason the buttons inside my ion-fab-list are not working properly. Here is my code, but I don’t think anyone will know how to fix it.

map.html


<ion-header>
  <ion-navbar>
    <ion-title>
      Map
    </ion-title>
  </ion-navbar>
</ion-header>>
<ion-content>
  <div #map id="map"></div>
    <ion-fab bottom right id="locate">
      <button ion-fab
      (click)="locationClick()" color="white"><ion-icon ios="ios-locate-outline" md ="md-locate" color="primary"></ion-icon></button>
    </ion-fab>
    <ion-fab top left id="compass-fab">
      <button ion-fab mini (click)="compassClick()" color="white" id="compass"></button>
    </ion-fab>
    <ion-fab top right id="layers">
      <button ion-fab mini id="layers-button" color="white"><ion-icon name="SMAPP-layers"></ion-icon></button>
      <ion-fab-list side="bottom">
        <button ion-fab mini (click)="trafficClick()" id="traffic" color="white"></button>
      </ion-fab-list>
    </ion-fab>
</ion-content>

map.scss:

page-office-locator {
  #map {
    height: 100%;
  }
  #locate {
    margin-bottom: 20px;
    margin-right: 20px;
  }
  #compass-fab {
    margin-top: 50px;
    #compass {
      background-image:url("../assets/icon/compass.png");
      background-repeat:no-repeat;
      background-size: 40px 40px;
      background-position: center;
    }
  }
  #layers {
    margin-top: 5px;
    #layers-button {
      background-size: 20px 20px;
      background-repeat:no-repeat;
      background-position: center;
    }
    #traffic {
      background-size: 25px 25px;
      background-image:url("../assets/icon/traffic-off.png");
      background-repeat:no-repeat;
      background-position: center;
    }
  }
}
2

This makes me suspect that you are directly manipulating the DOM in your controller. Are you? Is it possible that whatever you’re jamming in there is eating the events you are expecting to see your buttons respond to?

3

What do you mean by DOM? Also this is basically the exact code I found online through the documentation of google maps.

4

The reason why it is not working is because map is set equal to the GoogleMaps.create() which for some reason has been creating issues with the fab-list button.

5

Was a fix for this issue ever found. I’m also encountering it while using a fab on a map page.