Как я могу вставить кластеризацию маркеров?

Question

Я пытаюсь добавить маркерный кластер в мой код, но он не работает. Может кто-нибудь помочь мне? Я поставил HTML-код и код Javascript. Я пытался, но код не работает. код от https://developers.google.com/maps/documentation/javascript/marker-clustering Я только что ввел код для добавления кластера. Если вам нужен другой код, вы можете сказать мне.

<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/src/markerclusterer.js">
    </script>
  <script src="scrip.js">
  </script>
  <script src="https://maps.googleapis.com/maps/api/js?key=APIKEY&callback=initMap"async defer></script>
</html>

      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 45.6140747, lng: 8.8427703},
          zoom:14
        });
        var markerCluster = new MarkerClusterer(map, markersArray,
           {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});


      }
      function clearOverlays() {
        for (var i = 0; i < markersArray.length; i++ ) {
            markersArray[i].setMap(null);
        }
        markersArray.length = 0;
        }





        $( document ).ready(function() {
    dbRef.on('value', function(snapshot) {
      snapshot.forEach(function(child) {
      var childs=child.val();
       //var dataSegn = new Date(childs.data2.year,childs.data2.month,childs.data2.date);
       var contentString = 'Segnalazione del: '+childs.data+'<br>Per: '+childs.motivo+'<br><img src="'+childs.urlimmagine+'" alt="Foto" style="width:200px;height:300px;">';

       var infowindow = new google.maps.InfoWindow({
           content: contentString
           });

      if(childs.motivo =='ESCREMENTI') {
      var marker = new google.maps.Marker({
          position: {lat: childs.lat, lng: childs.lon},
          map: map,
          title: childs.motivo,
          icon : 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'
          });
          markersArray.push(marker);
          marker.addListener('click', function() {
          map.setZoom(16);
          map.setCenter(marker.getPosition());
          infowindow.open(map, marker);
        });
      }
      if(childs.motivo =='PERICOLOSI'){
      var marker = new google.maps.Marker({
          position: {lat: childs.lat, lng: childs.lon},
          map: map,
          title: childs.motivo,
          icon : 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png'
          });
          markersArray.push(marker);
          marker.addListener('click', function() {
          map.setZoom(16);
          map.setCenter(marker.getPosition());
          infowindow.open(map, marker);
        });
      }
      if(childs.motivo =='RANDAGIO'){
      var marker = new google.maps.Marker({
          position: {lat: childs.lat, lng: childs.lon},
          map: map,
          title: childs.motivo,
          icon : 'http://maps.google.com/mapfiles/ms/icons/red-dot.png'
          });
          markersArray.push(marker);
          marker.addListener('click', function() {
          map.setZoom(16);
          map.setCenter(marker.getPosition());
          infowindow.open(map, marker);
        });
      }
      if(childs.motivo =='MALTRATTATI'){
      var marker = new google.maps.Marker({
          position: {lat: childs.lat, lng: childs.lon},
          map: map,
          title: childs.motivo,
          icon : 'http://maps.google.com/mapfiles/ms/icons/yellow-dot.png'
          });
          markersArray.push(marker);
          marker.addListener('click', function() {
          map.setZoom(16);
          map.setCenter(marker.getPosition());
          infowindow.open(map, marker);
        });
      }
        });
        });     

});