problem with the behavior of google.maps.Latlngbounds

Question

I have and following code that checks 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 in and centralizes, and that’s the problem, because when I have only collapsed pins, that is, in the same coordinate the map.fitBounds tries to centralize as much as possible and then nothing is visible.

I didn’t want this to happen, I actually wanted the pins that were in exactly the same position to be a little bit separate, but I don’t know if this is possible, unless it is dealt with in the creation of the maker or earlier in the creation of my positions.

If that’s a slightly strange question, but if anyone knows any 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 placing its positions on the map, and placing 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;

Answer 1

There is a very cool solution that 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 same lat/lng and separates when clicking on the cluster, so the user can select one at a time.

Scream if you need help.