Google maps delay on adding too much markers on IOS

Ionic Framework ionic-v3
1

Hello guys

There is a lot of delay on IOS when i add too many markers on a google map. I use a for loop. I have markers in an array and i use this code:

                   for(var i=0; i<this.municipalityList.length; i++){
			
			this.map.addMarker({
				title: 'title',
				snippet: 'snippet',
				icon: { 'url': 'assets/icons/municipality_marker.png' },
				animation: 'DROP',
				position: {
				  lat: this.municipalityList[i]['lat'],
				  lng: this.municipalityList[i]['lng']
				}
			})
			.then(marker => {
				
				marker.on(GoogleMapsEvent.MARKER_CLICK)
				.subscribe(() => {
					console.log('Marker clicked');
				});
			});
				
		}

Do you have any idea to improve this??? Thanks…

2

I found the solution. I use a php file to get data from server:

this.http
.get('.../getUsefulMarkers.php', headers)
.subscribe( data_ => {
    this.usefulList = JSON.parse(data_['_body']);
});

In getUsefulMarkers.php i return data:

$data[] = array(
    'title' => 'title',
    'snippet' => 'snippet',
    'icon' => array( 'url' => '.../municipality_marker.png' ),
    'position' => array( 'lat' => 'lat' , 'lng' => 'lng' )
);

and then in .ts file I use this code:

for(let key in this.usefulList){
    this.map.addMarker(this.usefulList[key]);
}

This is a very fast way to add multiple markers.