Cannot scroll, tilt, rotate and zoom the map after setting visibility of Markers or Circles on the Google Map (Ionic 4)

Question

I used ionic-native/google-maps in my ionic 4 app. The map div is visible, functional and draggable when I enter the page unless I have set something of the elements on the map.

When I click a button to set visibility of some Markers and Circles, they become visible/invisible successfully but the gesture of the map is not working normally. I can only scroll the map upwards, but failed to scroll it to other directions and also tilt, rotate and zoom the map unless I leave from the page and enter into the page again. Here is my code:

page.html

<div id="map_canvas"></div>
<ion-content>
  <ng-container *ngFor="let person of people">
    <ion-item (click)="showMarker(person)">
        Show Marker
    </ion-item>
  </ng-container>
</ion-content>

page.scss

#map_canvas {
  height: 40%;
}

page.ts (Suppose "people" is a valid array that contains "person" objects with key UUID.)

import { Component, OnInit } from '@angular/core';
import { Platform } from '@ionic/angular';
import { GoogleMap, GoogleMaps, Environment, Marker, GoogleMapsAnimation, GoogleMapsEvent } from '@ionic-native/google-maps/ngx';


export class Page implements OnInit {


  map: GoogleMap;
  markers = {};
  circles = {};
  people = [{...}]; // contains person objects

  constructor(
    private platform: Platform,
  ) {
      this.initializeMarkers();
  }

  loadMap() {
    Environment.setEnv({
      'API_KEY_FOR_BROWSER_RELEASE': (My API),
      'API_KEY_FOR_BROWSER_DEBUG': (My API),
    });
    this.map = GoogleMaps.create('map_canvas', {
      camera: {
        target: {
          lat: 114,
          lng: 22,
        },
        zoom: 9,
        tilt: 0,
      },
      controls: {
        myLocationButton: true,
        myLocation: true,
        compass: true,
      },
      gestures: {
        scroll: true,
        tilt: true,
        rotate: true,
        zoom: true,
      },
    });
    this.map.clear();
  }

  async initializeMarkers() {
    this.map.clear();
    this.markers = {};
    this.circles = {};
    for (const person of this.people) {
        await this.map.addMarker({
          title: person.alias,
          position: { lat: 114, lng: 22 },
          visible: false,
          animation: GoogleMapsAnimation.DROP,
        }).then(
          marker => {
            this.markers[person.uuid] = marker;
          }
        );
        await this.map.addCircle({
          radius: 30,
          center: this.markers[person.uuid].getPosition(),
          fillColor: 'rgba(0, 0, 255, 0.5)',
          strokeColor: 'rgba(0, 0, 255, 0.75)',
          strokeWidth: 1,
          visible: false,
        }).then(
          circle => {
            this.circles[person.uuid] = circle;
          }
        );
        this.markers[person.uuid].bindTo('position', this.circles[person.uuid], 'center');
    }
  }

  showMarker(person: any) {
    const marker = this.markers[person.uuid];
    const circle = this.circles[person.uuid];
    if (marker.isVisible()) {
      marker.hideInfoWindow();
      marker.setVisible(false);
      circle.setVisible(false);
    } else {
      marker.showInfoWindow();
      marker.setVisible(true);
      circle.setVisible(true);
    }
    this.map.setAllGesturesEnabled(true);
  }


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

}

ionic info

Ionic:

   Ionic CLI                     : 5.4.13
   Ionic Framework               : @ionic/angular 4.11.7
   @angular-devkit/build-angular : 0.803.21
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.0.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.1.0, browser 6.0.0, ios 5.1.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 13 other plugins)

cordova plugin list

cordova-plugin-autostart 2.3.0 "Autostart"
cordova-plugin-background-mode 0.7.3 "BackgroundMode"
cordova-plugin-ble-central 1.2.4 "BLE"
cordova-plugin-browsertab 0.2.0 "cordova-plugin-browsertab"
cordova-plugin-compat 1.2.0 "Compat"
cordova-plugin-device 2.0.3 "Device"
cordova-plugin-geolocation 4.0.2 "Geolocation"
cordova-plugin-googlemaps 2.6.2 "cordova-plugin-googlemaps"
cordova-plugin-inappbrowser 3.2.0 "InAppBrowser"
cordova-plugin-ionic-keyboard 2.2.0 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 4.1.3 "cordova-plugin-ionic-webview"
cordova-plugin-nativestorage 2.3.2 "NativeStorage"
cordova-plugin-splashscreen 5.0.3 "Splashscreen"
cordova-plugin-statusbar 2.4.3 "StatusBar"
cordova-plugin-whitelist 1.3.4 "Whitelist"
cordova.plugins.diagnostic 5.0.1 "Diagnostic"

How should I fix it? Thank you.

Answer 1

Here is the solution:

<ion-content>
  <div id="map_canvas"></div>
  <ng-container *ngFor="let person of people">
    <ion-item (click)="showMarker(person)">
       Show Marker
    </ion-item>
  </ng-container>
</ion-content>