index.html

<!DOCTYPE html>
<html>
<head>
  <title>Cluster example</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css"/>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="dist/screen.css" />
  <link rel="stylesheet" href="dist/MarkerCluster.css" />
  <link rel="stylesheet" href="dist/MarkerCluster.Default.css" />
  <script src="dist/leaflet.markercluster-src_mod4.js"></script>
  <script src="dist/realworld.388_mod.js"></script>
</head>

<body>

  <div id="map"></div>
  <script type="text/javascript">

    var tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Points &copy 2012 LINZ'}),
      latlng = L.latLng(-37.82, 175.24);

    var map = L.map('map', {center: latlng, zoom: 13, layers: [tiles]});

    var markers = L.markerClusterGroup({ singleMarkerMode: true});
    
    for (var i = 0; i < addressPoints.length; i++) {
      var a = addressPoints[i];
      var title = a[2];
      var marker = L.marker(new L.LatLng(a[0], a[1]),{ title: title });
      markers.addLayer(marker);
    }

    map.addLayer(markers);
    //console.log(markers.options);
  </script>