I am using the clusters markers example from the Google Maps API. https://developers.google.com/maps/documentation/javascript/marker-clustering#maps_marker_clustering-javascript

Markerclusterer CDN is already called.

But I get the error of InvalidValueError: setMap: not an instance of Map; and not an instance of StreetViewPanorama

Below is the code which I used. What am I doing wrong?

var map;

function initialize() {
  var mapProp = {
    center: new google.maps.LatLng(38, -78),
    zoom: 6,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('map'), mapProp);
};

jQuery(document).ready(function() {
  var url = 'https://opendata.howardcountymd.gov/resource/96q9-qbh7.json';
  initialize();
  jQuery.getJSON(url, function(data) {
    jQuery.each(data, function(i, field) {
     
      createMarker(data);
    
      function createMarker(data) {
       const labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

        var markers = new google.maps.Marker({
          position: new google.maps.LatLng(data[i].location.latitude, data[i].location.longitude),
          map: map,
          label: labels[i % labels.length],
          title: field.crossroad
        });
      };
      
       // Add a marker clusterer to manage the markers.
        new MarkerClusterer({ markers, map });
    });
  });

});