In order to create a marker cluster, call the CreateMarkerCluster method of the map object like this:
markers |
Array Required. Array of markers to be clustered. |
show |
Boolean Optional. Whether to display the clustered markers on create. |
This will return a markercluster object.
app.LoadPlugin("MapView"); var lat = -28.024 var lng = 140.887 const locations = [ { lat: -31.56391, lng: 147.154312 }, { lat: -33.718234, lng: 150.363181 }, { lat: -33.727111, lng: 150.371124 }, { lat: -33.848588, lng: 151.209834 }, { lat: -33.851702, lng: 151.216968 }, { lat: -34.671264, lng: 150.863657 }, { lat: -35.304724, lng: 148.662905 }, { lat: -36.817685, lng: 175.699196 }, { lat: -36.828611, lng: 175.790222 }, { lat: -37.75, lng: 145.116667 }, { lat: -37.759859, lng: 145.128708 }, { lat: -37.765015, lng: 145.133858 }, { lat: -37.770104, lng: 145.143299 }, { lat: -37.7737, lng: 145.145187 }, { lat: -37.774785, lng: 145.137978 }, { lat: -37.819616, lng: 144.968119 }, { lat: -38.330766, lng: 144.695692 }, { lat: -39.927193, lng: 175.053218 }, { lat: -41.330162, lng: 174.865694 }, { lat: -42.734358, lng: 147.439506 }, { lat: -42.734358, lng: 147.501315 }, { lat: -42.735258, lng: 147.438 }, { lat: -43.999792, lng: 170.463352 }, ] function OnStart() { lay = app.CreateLayout("Linear", "VCenter, FillXY") var apiKey = "AIzaSyD2eHntKEmh272p3ac6YjWPbPkwo3m2mck" map = app.CreateMapView( apiKey, 0.9, 0.5, lat, lng, 30 ) map.SetOnReady( MapOnReady ) lay.AddChild( map ) app.AddLayout( lay ) } function MapOnReady() { //create the markers and put them in array var markers = locations.map( function( loc ) { return map.CreateMarker( loc.lat, loc.lng ) }) map.CreateMarkerCluster( markers ) }