google-maps-api-3 - インフォボックスの重複を避ける - Google マップ v3

Question

クルーズ ルートを Google マップに表示し、各港をインフォボックスでマークします。残念ながら、これらのインフォボックスは定期的に重複しています。どうすればこれを回避できますか?

私はすでに Spiderfy を試しましたが、このインスタンスには適していません。

マップのズーム レベルを変更することもできません。理想は、作成時に重なっているインフォボックスを認識して再配置できるプラグインまたは類似のものです。しかし、私はどこにもこのようなものを見つけることができませんでした。

2 番目の可能性は、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;

}