Избегайте дублирования инфобокса - Google Maps v3

Question

Я отображаю круизные маршруты на карте Google и отмечаю каждый порт инфобоксом. К сожалению, эти информационные блоки регулярно перекрываются. Как этого можно избежать?

Я уже пробовал spiderfy, но он не подходит в этом случае.

Изменение уровня масштабирования карты также не вариант. Идеальным вариантом будет плагин или что-то подобное, которое может распознавать перекрывающиеся инфобоксы при создании и переупорядочивать их. Однако я нигде не смог найти что-то подобное.

Второй возможностью было бы изменить позицию с помощью javascript, но, учитывая мой недостаток опыта работы с javascript и картами Google, я не смог этого добиться. Я также не нашел пример, который я мог бы взломать.

Был бы признателен за некоторую информацию / советы / указатели в правильном направлении.

Спасибо МК

Вот мой код:

function initialize() {
    var arrayMarkers = [];
    var idx = 0;
    var mapLatlng = new google.maps.LatLng(-27.6264198719, 146.9179666042);
    var mapOptions = { center: mapLatlng,
    zoom: 13, 
    mapTypeId: google.maps.MapTypeId.SATELLITE };
    var map = new google.maps.Map(document.getElementById("karte"), mapOptions);
    var bounds = new google.maps.LatLngBounds();

    arrayMarkers[idx] = [];
    arrayMarkers[idx]['breite'] = -33.859261813133;
    arrayMarkers[idx]['laenge'] = 151.200070381165;
    arrayMarkers[idx]['farbe'] = "http://new.kfb.localhost:8888/img/ico/button2_gruen.png";arrayMarkers[idx]['hafen'] = "Abfahrt Sydney";
    arrayMarkers[idx]['link'] = "Karte&#44; Wetter und<br>Landausfl&uuml;ge f&uuml;r<br><a href='hafen.php?hafen=528'>Sydney</a><br>Do, 07.02.13";idx++;
    arrayMarkers[idx] = [];

      .
      .
      . etc.

Чтобы добавить маркеры и инфобоксы на карту, я вызываю эту функцию:

function create_markers_v3(map, bounds, arrayMarkers) {

var latLng = [];
var img = [];
var marker = [];
var optionsPort = [];
var ib = [];
var infoWindow = [];

for (i = 0; i < arrayMarkers.length; i++)
{
    latLng[i] = new google.maps.LatLng(arrayMarkers[i]['breite'], arrayMarkers[i]['laenge']);
    bounds.extend(latLng[i]);
    map.fitBounds(bounds);
    img[i] = arrayMarkers[i]['farbe'];
    marker[i] = new google.maps.Marker(
    {
        position: latLng[i],
        map: map,
        icon: img[i]
    });
    optionsPort[i] = {
        content: arrayMarkers[i]['hafen'],
        disableAutoPan: false,
        pixelOffset: new google.maps.Size(3, -20),
        position: new google.maps.LatLng(arrayMarkers[i]['breite'], arrayMarkers[i]['laenge']),
        zIndex: null,
        boxStyle: { 
            opacity: 0.81,
            fontSize: "6pt",
            backgroundColor: "#ffffff",
            padding: "0 2px 1px 3px",
            lineHeight: "1em",
            border: "1px solid #333333"
        },
        closeBoxURL: "",
        isHidden: false,
        pane: "floatPane",
        enableEventPropagation: true
    };
    if (arrayMarkers[i]['hafen'].length > 0)
    {
        ib[i] = new InfoBox(optionsPort[i]);
        ib[i].open(map, marker[i]);
        arrayMarkers[i]['ib'] = ib[i];

        if (arrayMarkers[i]['link'].length > 0)
        {                   
            addInfoWindow(map, arrayMarkers[i], marker[i], i);
        }
    }
}
return arrayMarkers;

}