problem with google.maps.LatLngBounds behavior

4

I have and following code that pecorre my maker and arrow the bouns

var bounds = new google.maps.LatLngBounds();

$.each(markers_temp, function (key, value) {
    markers[key] = value;
    bounds.extend(markers[key].position);
});

markerCluster = new MarkerClusterer(map, markers);

map.fitBounds(bounds);

It works and zooms and centralizes, and that is the problem, because when I have only pins collapsed, that is, in the same coordinate map.fitBounds tries to center as much as possible and there is nothing visible. p>

I did not want this to happen, I actually wanted the pins that were exactly in the same position to be a bit separated, but I do not know if that is possible, unless it is handled in the creation of the maker or before the creation time of my positions.

If that is a rather strange question, but does anyone know of a more elegant solution?

UPDATE

Then using the solution

function newMarker(lat, long, text_content, id, type) {
    if (markers[id]) {
        var position = new google.maps.LatLng(lat, long);
        markers[id].setPosition(position);
        markers[id].set("type", "visible");
        markers[id].setMap(map);
    } else {
        if (type == 'sender') {
            image = image_sender;
        } else {
            image = image_deliver;
        }

        var marker = new google.maps.Marker({
            map: map,
            position: new google.maps.LatLng(lat, long),
            icon: image
        });

        google.maps.event.addListener(marker, 'click', (function (marker) {
            return function () {
                infowindow.close();
                infowindow.setContent(content_string);
                infowindow.open(map, marker);
                var position = marker.getPosition();
                map.panTo(position);
            }
        })(marker));

        var content_string = text_content;

        marker.set("type", "visible");

        markers_temp[id] = marker;
    }
}

This function where I build my maker by putting his positions on the map, and putting the content of the information.

function set_markers() {
    var oms = new OverlappingMarkerSpiderfier(map);

    var bounds = new google.maps.LatLngBounds();
    $.each(markers_temp, function (key, value) {
        markers[key] = value;
        bounds.extend(markers[key].position);
        oms.addMarker(markers[key]);
    });

    map.fitBounds(bounds);
}

It works perfectly;

    
asked by anonymous 02.12.2015 / 15:04

1 answer

2

There is a very nice solution I used in a project, follow the link below.

Component

But first, see if the example below fits your problem.

demo

It takes points with the same lat / lng and separates when it clicks on the cluster, so the user can select one at a time.

Shout if you need help.

    
02.12.2015 / 16:23