Question

I have many map markers with the exact same lat/long cords so no matter how far in I zoom my map still shows the marker cluster and the number of results.

Is there a way to have some onclick or onhover event so that it shows an info box with all of the markers in that cluster in a list? Then clicking a link within that info box opens up that individual marker info box?

I’ve read solutions to change the lat, long by a small amount so that they aren’t the same location. I think that is very messy and not that good anyways if there ends up being multiple markers 10+ anyways at the same locationg. I think it’d be much easier for a user to just click the cluster and bring up the info window with all of those markers in there with links.

Or if someone knows another plugin that does what I am seeking I could work with that too. I just haven’t found much info on it.

Answer 1

There might be a plug in out there to do what you want, but it’s also possible to do without one. I did something like that in one of my projects.

1. Add event listener to each marker; clicking opens marker list info window
2. The content of the marker list info window contains onclick attributes that will open the marker info window.

My code was tucked away into functions, but it was basically just this:

//1) while creating marker, create click listener that opens the marker list
google.maps.event.addListener(marker, 'click', function() {
    markerWindow.close();
    markerList.open(map, marker);
});

//2) store the content required by the marker's info windows
var markers = [
    [marker1Reference, "The Stadium"],
    [maerker2Reference, "The Supermarket"]
];

//3) the function that is called each time a marker is chosen from the marker list
function openMarkerInfo(markerIndex) {
    markerList.close();
    markerWindow.setContent(markers[markerIndex][1]);
    markerWindow.open(map, markers[markerIndex][0]);
}

//4) info window for the marker list - the content includes JS onclick events that will open each marker info window
markerList = new google.maps.InfoWindow({
    content: "Choose:<br><br><div href='' class='markerLink' onclick='openMarkerInfo(0)'>The Stadium</div><br><div href='' class='markerLink' onclick='openMarkerInfo(1)'>My House</div>"
});
//5) the marker window that will get set each time a marker is clicked in the list
markerWindow = new google.maps.InfoWindow();

Hope that helps!