Avoid infobox overlapping - google maps v3

问题

I display cruise routes on a google map and mark each port with an infobox. Unfortunately these infoboxes regularly overlap. How can this be avoided?

I've already tried spiderfy but it's not suitable in this instance.

Changing the zoom level of the map is also not an option. The ideal would be a plugin or something similar that can recognize overlapping infoboxes at creation and rearrange them. However, I haven't been able to find something like this anywhere.

A second possibility would be to change the position via javascript, but given my lack of expertise with javascript & google maps, I haven't been able to achieve this. Nor have I found an example that I could hack.

Would appreciate some info/advice/pointers in the right direction.

Thanks MK

Here's my code:

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.

To add the markers and infoboxes to the map, I call this function:

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;

}

来源：https://stackoverflow.com/questions/15203790/avoid-infobox-overlapping-google-maps-v3

标签

google-maps-api-3

overlapping

infobox