Problems when hiding elements by css inside map

I’m submitting a … (check one with “x”) [ ] question [x ] any problem or bug report [ ] feature request

The plugin version: (check one with “x”) [x] 2.0-beta3 (github) [ ] 2.0 (npm)

If you choose ‘problem or bug report’, please select OS: (check one with “x”) [x ] Android [ ] iOS

cordova information: (run $> cordova plugin list)

cordova-plugin-console 1.0.5 "Console"
cordova-plugin-device 1.1.4 "Device"
cordova-plugin-googlemaps 2.0.8 "cordova-plugin-googlemaps"
cordova-plugin-splashscreen 4.0.3 "Splashscreen"
cordova-plugin-statusbar 2.2.2 "StatusBar"
cordova-plugin-whitelist 1.3.1 "Whitelist"
ionic-plugin-keyboard 2.2.1 "Keyboard"

ionicinformation: (run $> ionic info)

cli packages: (C:\Users\ASUS\AppData\Roaming\npm\node_modules)

    @ionic/cli-utils  : 1.10.2
    ionic (Ionic CLI) : 3.10.3

global packages:

    Cordova CLI : 7.0.1

local packages:

    @ionic/app-scripts : 2.1.4
    Cordova Platforms  : android 6.2.3
    Ionic Framework    : ionic-angular 3.6.1

System:

    Android SDK Tools : 26.0.2
    Node              : v6.11.3
    npm               : 4.2.0
    OS                : Windows 10

If you use @ionic-native/google-maps, please show me the package.json

{
    "name": "gmaps-error-test",
    "version": "0.0.1",
    "author": "Ionic Framework",
    "homepage": "http://ionicframework.com/",
    "private": true,
    "scripts": {
        "clean": "ionic-app-scripts clean",
        "build": "ionic-app-scripts build",
        "lint": "ionic-app-scripts lint",
        "ionic:build": "ionic-app-scripts build",
        "ionic:serve": "ionic-app-scripts serve"
    },
    "dependencies": {
        "@angular/common": "4.1.3",
        "@angular/compiler": "4.1.3",
        "@angular/compiler-cli": "4.1.3",
        "@angular/core": "4.1.3",
        "@angular/forms": "4.1.3",
        "@angular/http": "4.1.3",
        "@angular/platform-browser": "4.1.3",
        "@angular/platform-browser-dynamic": "4.1.3",
        "@ionic-native/core": "4.2.1",
        "@ionic-native/splash-screen": "4.2.1",
        "@ionic-native/status-bar": "4.2.1",
        "@ionic-native/google-maps": "^4.2.1",
        "@ionic/storage": "2.0.1",
        "cordova-android": "^6.2.3",
        "cordova-plugin-console": "^1.0.5",
        "cordova-plugin-device": "^1.1.4",
        "cordova-plugin-googlemaps": "git+https://github.com/mapsplugin/cordova-plugin-googlemaps.git#multiple_maps",
        "cordova-plugin-splashscreen": "^4.0.3",
        "cordova-plugin-statusbar": "^2.2.2",
        "cordova-plugin-whitelist": "^1.3.1",
        "ionic-angular": "3.6.1",
        "ionic-plugin-keyboard": "^2.2.1",
        "ionicons": "3.0.0",
        "rxjs": "5.4.0",
        "sw-toolbox": "3.6.0",
        "zone.js": "0.8.12"
    },
    "devDependencies": {
        "@ionic/app-scripts": "2.1.4",
        "typescript": "2.3.4"
    },
    ...
    }
}

Current behavior: Hello, I’m having some troubles when hiding/showing elemens inside the div tag that holds the map. when I change the variables that should trigger the hiding/showing of the element. the element wont hide or show until I force a refresh by changing pages or pressing back.

Expected behavior: Elements should hide/show instantly when changing the respective variables

Related code, data or error log (please format your code or data): I have something like

<div #map id="map">    
    <button ion-fab mini color="primary-dark" (click)="myLocation()" 
    [style.display]="fabShow ? 'block' : 'none'">
      <ion-icon name="locate"></ion-icon>
    </button>
</div>

the button inside map should hide according to the value of fabShow but for some reason it wont refresh the layout until I force it by changing pages or something.

Steps to reproduce:

git clone https://github.com/Tott0/gmaps-error-test.git
npm install
ionic cordova prepare
ionic cordova run android

in the map page, move the camera and it should show the fab button (console does print fabShow: true) but it doesnt refresh (If you go to home or minimize the app and come back the fab button does appear)

[wf9a5m75]

Here you are.

I appreciate if you donate some amount for this project, because this is not the map plugin bug, it is ionic problem. And you spent my time.

import { Component, NgZone } from '@angular/core';
import { NavController } from 'ionic-angular';

import { GoogleMaps, GoogleMap, GoogleMapsEvent, GoogleMapOptions, LatLng,
  LatLngBounds, MarkerOptions, Marker, CameraPosition, PolylineOptions,
  Polyline } from '@ionic-native/google-maps';
import { Platform } from 'ionic-angular';


@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  providers: [GoogleMaps]
})
export class HomePage {

  map: GoogleMap;
  cameraChanging: boolean = false;
  location = {
    lat: undefined,
    lng: undefined
  }
  fabShow: boolean = false;

  constructor(
    private googleMaps: GoogleMaps,
    private platform: Platform,
    public navCtrl: NavController,
    private _ngZone: NgZone) {

  }

  loadMap(){
    let opt: GoogleMapOptions ={
      'controls': {
        'mapToolbar': false
      },
      'gestures': {
        'scroll': true, 'tilt': false, 'rotate': false, 'zoom': true
      },
      camera:{
        target: new LatLng(this.location.lat, this.location.lng),
        zoom: 15
      }
    }
    var self = this;

    this.map = this.googleMaps.create('map', opt);
    this.map.one(GoogleMapsEvent.MAP_READY).then(() => {

      console.log("subscribe camera end");
      this.map.on(GoogleMapsEvent.CAMERA_MOVE_END).subscribe(
      (cameraPosition) => {
        console.log("on camera end");

          self._ngZone.run(() => {
            self.fabShow = true;
            console.log("fabShow: " + self.fabShow);
          });
      });
    });
  }

  myLocation(): Promise<any> {
    console.log("start animate camera");
    var self = this;
    return this.map.animateCamera({
      'target': new LatLng(this.location.lat, this.location.lng),
      'zoom': 15,
      'duration': 300
    }).then(() => {
      console.log("end animate camera");
      self._ngZone.run(() => {
        self.fabShow = false;
        console.log("fabShow: " + self.fabShow);
      });
    });
  }

  ionViewDidLoad() {
    this.location.lat = 10.973904;
    this.location.lng = -74.811895;

    this.platform.ready().then(() => {
      this.loadMap();
    })
  }

}

[Tott0]

Also tried that and functions normally

it only stops working when on a page with a map.