Cannot scroll, tilt, rotate and zoom the map after setting visibility of Markers or Circles on the map

#1

I use ionic-native google-maps. When I click a button to set some Marker and Circle visible, they become visible but the gesture of the map is not functional properly. I can only drag the map upwards but cannot drag to other directions unless I leave the page and enter the page again. How can I solve it?

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"
#2

Here is my code BTW.

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

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());
  }

}

Suppose “people” is a valid array that contains “person” objects with key UUID.

#3

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>