google maps marker cluster

I found solution minutes after I posted my question...

I added the required js call after the base maps api js:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=<?php echo htmlEncode($GLOBALS['GEOCODER_GOOGLE_API_KEY']); ?>"></script>
<script src="https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/src/markerclusterer.js"></script>

and modified the script as:

function initialize() {
  var mapCanvasId = 'map_canvas';
  var mapOptions  = { mapTypeId: google.maps.MapTypeId.ROADMAP };
  var map         = new google.maps.Map(document.getElementById(mapCanvasId), mapOptions);
  var bounds      = new google.maps.LatLngBounds();
  var infowindow  = new google.maps.InfoWindow();
  var markers = []; // cluster related 1.
<?php
	foreach ($myRecords as $record) {
	  if (!$record['latitude'] || !$record['longitude']) { continue; }
	  $jsFunctionArgs = "{$record['latitude']}, {$record['longitude']}, {$record['num']}, '" .jsEncode($record['_link']). "'";
	  print "  _geocoder_addMarker($jsFunctionArgs);\n";
	}
?>
  //
  function _geocoder_addMarker(latitude, longitude, recordNum, detailLink) {
    var latLng       = new google.maps.LatLng(latitude, longitude);
    var infowindowEl = document.getElementById('marker_infowindow_' + recordNum);
    var marker       = new google.maps.Marker({ map: map, position: latLng });
    markers.push(marker);  // cluster related 2.
    google.maps.event.addListener(marker, 'click', function() {
      if (infowindowEl) {
        infowindow.setContent(infowindowEl.innerHTML);
        infowindow.open(map, marker);
      }
      else {
        window.location = detailLink;
      }
    });
    bounds.extend(latLng);
  }
  //
  map.fitBounds(bounds);
  
  var markerCluster = new MarkerClusterer(map, markers, {
    imagePath: 'https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/images/m'
  });  // cluster related 3.
}

I hope somebody will find this useful.