Angular google map doesn't show markers on android

i use @angular/google-maps for my mobile application. It may sound wild why i don't use capacitor/google-map, first i use this, but i needed to make a custom cluster icon, which is not provided by library itself, so i decided to rewrite map with angular/google-maps. Everything works great, but on android markers doesn't shown, but on web and ios it's working good. What can be a problem?

<div class="map__wrapper">
<div class="map__container">
<google-map [width]="'100%'" [height]="'100%'"

="center" [zoom]="zoom" [mapId]="'google-map'" [options]="mapOptions">
@if (userPosition) {
<map-marker
[position]="userPosition"
[options]="{
icon: {
url: '/assets/images/blue-car.png',
},
}"
></map-marker>
}
<map-marker-clusterer [renderer]="clusterRenderer">
@for (stationPosition of stationPositions; track stationPosition) {
<map-marker
[position]="stationPosition"
[options]="{
icon: {
url: getMarkerContent('default'),
},
}"
/>
}
</map-marker-clusterer>
</google-map>
</div>
</div>


import { AfterViewInit, Component, CUSTOM_ELEMENTS_SCHEMA, inject } from '@angular/core';
import { IonicModule } from '@ionic/angular';
import { StationsService } from '../../core/services/stations.service';
import { Station } from '@utils/interfaces/stations.interface';
import { Cluster, GoogleMapsModule, MapMarkerClusterer, Renderer } from '@angular/google-maps';
import { Icons } from '@utils/enums/icons.enum';
import { Geolocation } from '@capacitor/geolocation';

@Component({
selector: 'app-map',
templateUrl: './map.component.html',
styleUrls: ['./map.component.scss'],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
standalone: true,
imports: [IonicModule, GoogleMapsModule, MapMarkerClusterer],
})
export class MapComponent implements AfterViewInit {
private stationsService = inject(StationsService);

public stations!: Station[];
public stationPositions: google.maps.LatLngLiteral[] = [];
public center: google.maps.LatLngLiteral = {
lat: 49.2268,
lng: 31.5,
};
public zoom: number = 5;
public mapOptions: google.maps.MapOptions = {
disableDefaultUI: true,
};
public userPosition?: google.maps.LatLngLiteral;

constructor() {}

public async ngAfterViewInit() {
await this.locateUser();
this.initStations();
}

public clusterRenderer: Renderer = {
render: ({ count, position }: Cluster) => {
return new google.maps.Marker({
position,
icon: {
url: '/assets/icons/cluster-icon.svg',
scaledSize: new google.maps.Size(36, 44),
anchor: new google.maps.Point(18, 44),
labelOrigin: new google.maps.Point(18, 18),
},
label: {
text: String(count),
color: '#000',
fontSize: '16px',
fontWeight: '700',
},
zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count,
});
},
};

public getMarkerContent(status: string): string {
switch (status) {
case 'default':
return Icons.MarkerDefault;
case 'active':
return Icons.MarkerActive;
case 'disabled':
return Icons.MarkerDisabled;
case 'noConnection':
return Icons.MarkerNoConnection;
default:
return Icons.MarkerDefault;
}
}

private async locateUser() {
try {
const permission = await Geolocation.requestPermissions();
if (permission.location !== 'granted') {
await Geolocation.requestPermissions();
}
const position = await this.getUserPosition();
this.userPosition = {
lat: position.coords.latitude,
lng: position.coords.longitude,
};
this.center = this.userPosition;
this.zoom = 13;
} catch {
console.error('Geolocation is not supported.');
}
}

private async getUserPosition(): Promise<GeolocationPosition> {
return new Promise<GeolocationPosition>((resolve, reject) => {
navigator.geolocation.getCurrentPosition(resolve, reject, {
enableHighAccuracy: true,
timeout: 8000,
});
});
}

private initStations(): void {
this.stationsService.getChargingStations().subscribe((stations) => {
this.stations = stations;
this.stationPositions = stations.map((item) => {
const [lat, lng] = item.location.coordinates.coordinates;
return { lat, lng };
});
});
}
}


I've tried to change icons from svg to png(didn't help), tried to check if backend doesn't send a data for markers(it does) but it's still doesn't work

Continue reading...​