Controls and Click events not fired / working

[ThomasBiede]

I'm submitting a ... (check one with "x")

• [ ] question
• [x] any problem or bug report
• [ ] feature request

If you choose 'problem or bug report', please select OS: (check one with "x")

• [x] Android
• [ ] iOS
• [ ] Browser

cordova information: (run $> cordova plugin list) cordova-plugin-bluetooth-serial 0.4.7 "Bluetooth Serial" cordova-plugin-device 2.0.2 "Device" cordova-plugin-geolocation 4.0.2 "Geolocation" cordova-plugin-googlemaps 2.6.2 "cordova-plugin-googlemaps" cordova-plugin-ionic-keyboard 2.2.0 "cordova-plugin-ionic-keyboard" cordova-plugin-ionic-webview 4.1.3 "cordova-plugin-ionic-webview" cordova-plugin-printer 0.8.0 "Printer" cordova-plugin-qrscanner 3.0.1 "QRScanner" cordova-plugin-splashscreen 5.0.2 "Splashscreen" cordova-plugin-statusbar 2.4.2 "StatusBar" cordova-plugin-whitelist 1.3.3 "Whitelist"

Current behavior: Not doing anything

Expected behavior: reacting to click and drag events

import { mapStyle } from "./styles/mapstyle";
import { Observable } from "rxjs";
import { PositionService } from "./../../services/gps/position.service";
import { HiveService, Hive } from "./../../services/db/hive.service";
import { Component, OnInit, AfterViewInit } from "@angular/core";
import { Router } from "@angular/router";
import {
  GoogleMaps,
  GoogleMap,
  GoogleMapsEvent,
  MyLocation,
  MarkerIcon,
  Environment,
  Marker
} from "@ionic-native/google-maps/ngx";

@Component({
  selector: "app-map",
  templateUrl: "./map.component.html",
  styleUrls: ["./map.component.scss"]
})
export class MapComponent implements OnInit, AfterViewInit {
  hives: Observable<Hive[]>;
  hiveData: Array<{ name; lat; lng; id }> = [];
  map: GoogleMap;

  constructor(
    private hiveService: HiveService,
    private location: PositionService,
    private event: Events,
    private router: Router,
    private platform: Platform,
    private toastCtrl: ToastController
  ) {
    // this.event.subscribe('added:marker', (name, lat, lng) => {
    //   this.addMarker(name, lat, lng, this.map, google.maps.Animation.DROP, hash);
    // });
    this.event.subscribe('load:map', () => {
      this.initMap();
    });
  }

  ngOnInit() {}

  ngAfterViewInit() {
    this.initMap();
  }

  async initMap(): Promise<void> {
    this.hives = this.hiveService.getHives();
    this.platform.ready().then(() => {
      this.map = GoogleMaps.create("map", {
        styles: mapStyle
      });

      this.map.one(GoogleMapsEvent.MAP_READY).then(() => {
        this.map
          .getMyLocation()
          .then((l: MyLocation) => {
            this.map.animateCamera({
              target: l.latLng,
              zoom: 14,
            });
          })
          .catch(err => {
            this.showToast(err.error_message);
          });

        this.hives.forEach(h => {
          h.forEach(hive => {
            this.addMarker(
              hive.name,
              hive.lat,
              hive.lng,
              null,
              hive.id
            );
          });
        });
      });
    });
  }

  addMarker(
    title: string,
    lat: number,
    lng: number,
    animation: string,
    id: string
  ): void {
    const icon: MarkerIcon = {
    url: 'http://localhost/assets/icons/icon.jpg',
    size: {
      width: 56.75,
      height: 79.45
    }
  };
    let marker: Marker = this.map.addMarkerSync({
      title,
      position: {
        lat,
        lng
      },
      animation,
      icon
    });

    marker.on(GoogleMapsEvent.MAP_CLICK).subscribe(() => {
      this.showToast("clicked");
      this.router.navigate(["single/", id]);
    });
  }

  async showToast(message: string) {
    const toast = await this.toastCtrl.create({
      message,
      duration: 8000,
      position: "middle"
    });
    toast.present();
  }
}