Can't display multiple HtmlInfoWindow

[hatimox]

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

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

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

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

cordova information: (run $> cordova plugin list)

com.googlemaps.ios 3.9.0 "Google Maps SDK for iOS"
cordova-androidx-build 1.0.4 "cordova-androidx-build"
cordova-plugin-app-version 0.1.9 "AppVersion"
cordova-plugin-device 2.0.2 "Device"
cordova-plugin-fcm-with-dependecy-updated 7.3.1 "Cordova FCM Push Plugin"
cordova-plugin-googlemaps 2.8.0-20200709-2008 "cordova-plugin-googlemaps"
cordova-plugin-ionic-keyboard 2.2.0 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 4.2.1 "cordova-plugin-ionic-webview"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-statusbar 2.4.2 "StatusBar"
cordova-plugin-whitelist 1.3.3 "Whitelist"

If you use @ionic-native/google-maps, please tell the package.json (only @ionic-native/core and @ionic-native/google-maps are fine mostly)

"@ionic-native/core": "^5.22.0-beta-1", "@ionic-native/google-maps": "^5.27.0-beta-20200630",

Current behavior: i'm working on a project and want to add multiple markers to the map ( success on this step) with an htmlinfowindow for each marker , and display all the htmlinfowindows at the same time but i got only the last one displayed

Expected behavior: all the infowindow should be displayed

Screen capture or video record: what i need

what i get

Related code, data or error log (please format your code or data): my data

"data": [
        {
            "lat": "51.3349833",
            "lon": "6.0991350",
            "description": "0.20 mm"
        },
        {
            "lat": "51.2998667",
            "lon": "6.0022533",
            "description": "0.00 mm"
        },
        {
            "lat": "51.2201067",
            "lon": "5.8785150",
            "description": "n/a"
        },
        {
            "lat": "51.1999567",
            "lon": "5.7385417",
            "description": "0.00 mm"
        },
        {
            "lat": "51.4342617",
            "lon": "6.4083933",
            "description": "0.20 mm"
        },
        {
            "lat": "44.8447250",
            "lon": "19.7638483",
            "description": "0.00 mm"
        },
        {
            "lat": "44.8498617",
            "lon": "19.7591050",
            "description": "0.20 mm"
        },
        {
            "lat": "51.4218050",
            "lon": "6.4281983",
            "description": "0.00 mm"
        },
        {
            "lat": "51.2840567",
            "lon": "5.8748500",
            "description": "0.00 mm"
        },
        {
            "lat": "51.4514617",
            "lon": "6.2511133",
            "description": "0.00 mm"
        },
        {
            "lat": "51.3725017",
            "lon": "6.3420100",
            "description": "0.00 mm"
        },
        {
            "lat": "51.4214067",
            "lon": "6.5314200",
            "description": "0.00 mm"
        },
        {
            "lat": "51.3234367",
            "lon": "6.3219683",
            "description": "n/a"
        },
        {
            "lat": "51.3489817",
            "lon": "6.0161033",
            "description": "0.00 mm"
        },
        {
            "lat": "51.3097983",
            "lon": "6.0484950",
            "description": "0.00 mm"
        }
    ]

function to init the MAP

async loadMap(lat, lng) {
    let mapOptions: GoogleMapOptions = {
      mapType: GoogleMapsMapTypeId.SATELLITE,
      controls: {
        'compass': true,
        'myLocationButton': false,
        'myLocation': false,   // (blue dot)
        'indoorPicker': false,
        'zoom': true,          // android only
        'mapToolbar': true     // android only
      },
      gestures: {
        scroll: true,
        tilt: true,
        zoom: true,
        rotate: false
      },
      camera: {
        target: {
          lat: lat,
          lng: lng
        },
        zoom: 12,
        tilt: 30
      }
    };
    this.map4 = GoogleMaps.create('map4', mapOptions);
  }

function to add markers

async add_markers_tomap(data) {
    this.map4.clear();
    data.forEach(async (element) => {
      let htmlInfoWindow = new HtmlInfoWindow();
      let frame: HTMLElement = document.createElement('div');
      let text = '<h3>' + element.description + '</h3>';
      frame.innerHTML = [
        text
      ].join("");
      htmlInfoWindow.setContent(frame, {
        width: "100px",
        height: "150px"
      });
      const marker = await this.map4.addMarker({
        position: { lat: element.lat, lng: element.lon },
        title: element.description,
        icon: {
          url: "./assets/imgs/marker.png",
          size: {
            width: 30,
            height: 43
          }
        },
        animation: 'DROP'
      })
      // Without clicking icon additionally
      htmlInfoWindow.open(marker);
    });
  }

[wf9a5m75]

HtmlInfoWindow is designed only for one.

[hatimox]

HtmlInfoWindow is designed only for one.

@wf9a5m75 so there are no way to implement what i need ??

[wf9a5m75]

Sorry, no way.