Marker Clustering

More about how clustering works and examples https://developers.google.com/maps/documentation/javascript/marker-clustering

Preparation

First need to include markers clustering library

<script src="https://unpkg.com/@@google/[email protected]/dist/markerclustererplus.min.js"></script>

Creating Marker Clusters

Then create MarkerClustering passing already created markers to constructor.

private async Task InvokeClustering()
{
	var coordinates = new List<LatLngLiteral>()
	{
		new LatLngLiteral(147.154312, -31.56391),
		new LatLngLiteral(150.363181, -33.718234),
		new LatLngLiteral(150.371124, -33.727111),
		new LatLngLiteral(151.209834, -33.848588),
		new LatLngLiteral(151.216968, -33.851702),
		new LatLngLiteral(150.863657, -34.671264),
		new LatLngLiteral(148.662905, -35.304724),
		new LatLngLiteral(175.699196, -36.817685),
		new LatLngLiteral(175.790222, -36.828611),
		new LatLngLiteral(145.116667, -37.75),
		new LatLngLiteral(145.128708, -37.759859),
		new LatLngLiteral(145.133858, -37.765015),
		new LatLngLiteral(145.143299, -37.770104),
		new LatLngLiteral(145.145187, -37.7737),
		new LatLngLiteral(145.137978, -37.774785),
		new LatLngLiteral(144.968119, -37.819616),
		new LatLngLiteral(144.695692, -38.330766),
		new LatLngLiteral(175.053218, -39.927193),
		new LatLngLiteral(174.865694, -41.330162),
		new LatLngLiteral(147.439506, -42.734358),
		new LatLngLiteral(147.501315, -42.734358),
		new LatLngLiteral(147.438, -42.735258),
		new LatLngLiteral(170.463352, -43.999792),
	};

	var result = new List<Marker>(coordinates.Count());
	var index = 1;
	foreach (var latLngLiteral in coordinates)
	{
		var marker = await Marker.CreateAsync(map1.JsRuntime, new MarkerOptions()
		{
			Position = latLngLiteral,
			Map = map1.InteropObject,
			Label = $"Test {index++}",
		});

		result.Add(marker);
	}

	await MarkerClustering.CreateAsync(map1.JsRuntime, map1.InteropObject, result);
}