Карты Google: обрабатывать несколько перекрывающихся кластеров

Question

Я использую карту Google с markerclusterer.js. У меня есть 2 типа маркеров, которые я обрабатываю, используя 2 разных кластера маркеров. Моя проблема в том, как справиться с ситуацией, когда 2 разных кластера перекрываются

Простую скрипку можно найти здесь: http://jsfiddle.net/Anja_Reeft/01t4h8bo/2/

var gmarkers1 = [];
var markers1 = [];
var infowindow = new google.maps.InfoWindow({
  content: ''
});
var markerCluster;
// Our markers
markers1 = [
  ['0', 'Title 1', 52.4357808, 4.991315699999973],
  ['1', 'Title 2', 52.4357808, 4.981315699999973],
  ['2', 'Title 3', 52.4357808, 4.991315699999973],
  ['3', 'Title 4', 52.4357808, 4.991315699999973],
  ['4', 'Title 5', 52.4555687, 5.039231599999994]
];
/**
 * Function to init map
 */
function initialize() {
  var center = new google.maps.LatLng(52.4357808, 4.991315699999973);
  var mapOptions = {
    zoom: 10,
    center: center,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };
  var styles = [[{
    url: 'https://i.postimg.cc/rFZwN4NH/people35.png',
    height: 35,
    width: 35,
    anchor: [16, 0],
    textColor: '#ff00ff',
    textSize: 10
  }, {
    url: 'https://i.postimg.cc/0yL5Lq3d/people45.png',
    height: 45,
    width: 45,
    anchor: [24, 0],
    textColor: '#ff0000',
    textSize: 11
  }, {
    url: 'https://i.postimg.cc/q7yBr5Hf/people55.png',
    height: 55,
    width: 55,
    anchor: [32, 0],
    textColor: '#ffffff',
    textSize: 12
  }], [{
    url: 'https://i.postimg.cc/NfsK4BqK/conv30.png',
    height: 27,
    width: 30,
    anchor: [3, 0],
    textColor: '#ff00ff',
    textSize: 10
  }, {
    url: 'https://i.postimg.cc/fRkkGCbZ/conv40.png',
    height: 36,
    width: 40,
    anchor: [6, 0],
    textColor: '#ff0000',
    textSize: 11
  }, {
    url: 'https://i.postimg.cc/xdz8CdH4/conv50.png',
    width: 50,
    height: 45,
    anchor: [8, 0],
    textSize: 12
  }], [{
    url: 'https://i.postimg.cc/y85WsRJR/heart30.png',
    height: 26,
    width: 30,
    anchor: [4, 0],
    textColor: '#ff00ff',
    textSize: 10
  }, {
    url: 'https://i.postimg.cc/0QGNYHVG/heart40.png',
    height: 35,
    width: 40,
    anchor: [8, 0],
    textColor: '#ff0000',
    textSize: 11
  }, {
    url: 'https://i.postimg.cc/c1mH62g0/heart50.png',
    width: 50,
    height: 44,
    anchor: [12, 0],
    textSize: 12
  }], [{
    url: 'https://i.postimg.cc/nrcnvVjZ/pin-35.png',
    height: 26,
    width: 30,
    anchor: [4, 0],
    textColor: '#ff00ff',
    textSize: 10
  }, {
    url: 'https://i.postimg.cc/brCpLXkn/pin-45.png',
    height: 35,
    width: 40,
    anchor: [8, 0],
    textColor: '#ff0000',
    textSize: 11
  }, {
    url: 'https://i.postimg.cc/66YWBZgQ/pin-55.png',
    width: 50,
    height: 44,
    anchor: [12, 0],
    textSize: 12
  }], [{
    url: 'https://i.postimg.cc/xCP0JNdt/pin.png',
    height: 48,
    width: 30,
    anchor: [-18, 0],
    textColor: '#ffffff',
    textSize: 10,
    iconAnchor: [15, 48]
  }]];


var clusterOptionsEmp = {
    zoomOnClick: false,
    styles: styles[0],
}


var clusterOptionsJob = {
    zoomOnClick: false,
    styles: styles[3],
}


  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  markerClusterEmp = new MarkerClusterer(map, [], clusterOptionsEmp);
  markerClusterJob = new MarkerClusterer(map, [], clusterOptionsJob);
  for (i = 0; i < markers1.length; i++) {
    if (i % 2 == 1 ) {
        addMarker(markerClusterEmp,markers1[i]);
    } else {
        addMarker(markerClusterJob,markers1[i]);
    }
  }
}
/**
 * Function to add marker to map
 */
function addMarker(markerCluster,marker) {
  var category = marker[4];
  var title = marker[1];
  var pos = new google.maps.LatLng(marker[2], marker[3]);
  var content = marker[1];
  marker1 = new google.maps.Marker({
    title: title,
    position: pos,
    category: category,
    map: map
  });
  markerCluster.addMarker(marker1);
  // Marker click listener
  google.maps.event.addListener(marker1, 'click', (function(marker1, content) {
    return function() {
  infowindow.setContent(content);
  infowindow.open(map, marker1);
  map.panTo(this.getPosition());
  map.setZoom(15);
    }
  })(marker1, content));

 google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster){
    var markers = cluster.getMarkers();
    var infoText = "Count : " + markers.length + "<br>";

    for (i = 0; i < markers.length; i++) {
      var title = markers[i].title;
      infoText += title + "<br>";
    }

       infowindow.setContent(infoText);
       infowindow.setPosition(cluster.getCenter());
       infowindow.open(map);      

});

}
google.maps.event.addDomListener(window, "load", initialize);

Я не знаю, можно ли это сделать, но я ищу способ определить, перекрываются ли два разных типа кластеров, и если да, собрать их в кластер третьего типа.

Я пытался просто добавить маркеры в третий кластер, но тогда у меня просто есть дополнительный новый маркер поверх двух других. И все мои попытки добавить кластер в другой кластер просто приводят к сбою кода.

Я также смотрел на OverlappingMarkerSpiderfier, но я мог заставить его работать либо.

Я надеюсь, что у кого-то есть решение или идея, как справиться с этой ситуацией