群集相同的lat / lng gmaps v3

Question

On my website I have a form that allows users to register. It asks users to provide their city, state, and country. I also have a map that drops a marker for each user based on a lat/lng that's drawn from that city, state, country combination ($location).

Because I'm not being super specific (as in, I'm not asking for their ACTUAL address), I have a number of users that have the same lat/lng. And this creates a problem when trying to view markers on my map.

Should I use a clustering service? If so, do you have any suggestions?? Like I said, information flows from mySQL database --> XML --> PHP.

If so, it'll be clustered at the most zoomed level (like I said, same lat/lng). As a result, I'm going to need a info window that allows me to select each user at that particular location.

Ideas? Suggestions??? Much appreciated!!!

Jeremy

Answer 1

MarkerClusterer: http://gmaps-utility-library.googlecode.com/svn/trunk/markerclusterer/1.0/docs/examples.html

Or by hand (roughly - sample code only!)

        var latlng = new google.maps.LatLng(-33.8671390, 151.2071140);
        var myOptions = {
            zoom: 8,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        var markers = [];
        var newmarkers = [];

        for(var j=0; j<5; j++) {
            markers.push({lat:-33.8671390, lng:151.2071140, title:'This is marker #' + i });

            if(j==0) newmarkers.push(markers[j]);
            for(var i=0; i<newmarkers.length; i++) {
                if(newmarkers[i].lat == markers[j].lat && newmarkers[i].lng == markers[j].lng) {
                    newmarkers[i].title += ' AND ' + markers[j].title;
                    continue;
                }
                newmarkers.push(markers[j]);
            }
        }

        for(var i=0; i<newmarkers.length; i++) {
            var mkr = new google.maps.Marker({
                position: new google.maps.LatLng(newmarkers[i].lat, newmarkers[i].lng), 
                map: map, 
                title: newmarkers[i].title
            });
        }