CODEWITHSUNDEEP
androidgoogle-mapscordovaionic-frameworkcapacitor
Max
Max

Reputation: 31

Ionic 5 Google Maps markers flickering when zooming

I’m having Google Maps marker issues in my Ionic 5 project which is isolated to native Android builds only.

When zooming in or out, my custom markers are flickering/blinking.
The flickering is not an issue on other platforms. Only on native Android.

Any ideas would be greatly appreciated.

Here in the snippet of the marker code

  addMarker(station: StationModel, showMemberDiscount: boolean, index: number) {
    let selectedPrice = showMemberDiscount? station.selectedFuelTypePrice.discountedPrice : station.selectedFuelTypePrice.price;

    this.getMarkerIcons(station, showMemberDiscount).pipe(takeUntil(this.destroyed$)).subscribe(
      icons => {
        let marker = new google.maps.Marker({
          position: { lat: station.location.position.latitude, lng: station.location.position.longitude },
          label: {
            text:  selectedPrice.toFixed(1) + '',
            color: '#FFFFFF',
            fontSize: '20px',
            fontWeight: 'bold',
          },
          icon: icons.iconDefault,
          zIndex: index,
          map: this.map,
        });
        marker.addListener('click', () => {
          this.ngZone.run(() => {
            // reset previous active marker if there's one
            this.clearActiveMarker(true);
            this.map.panTo(marker.getPosition());
            // store the default icon for selected marker
            this.activeMarkerDefaultIcon = {marker: marker, icon: icons.iconDefault, zIndex: marker.getZIndex()};
            this.selectedStation.next(station);
            marker.setZIndex(google.maps.Marker.MAX_ZINDEX + 1);
            marker.setIcon(icons.iconSelected);
          });
        });
        this.markers.push(marker);
      });
  }

Upvotes: 0

Views: 417

Answers (1)

Max
Max

Reputation: 31

Setting the hardware acceleration to false solved the flickering marker issue

<application android:hardwareAccelerated="false" ...>

https://developer.android.com/guide/topics/graphics/hardware-accel

Upvotes: 1

Related Questions