How to render multiple markers at the exact same c

问题:

I have multiple addresses on the same street with the same house number, but with different apartment numbers. Google Maps Geocoding Service (v2) doesn't go down to apartment level accuracy for many addresses and just returned me the exact same geocode coordinates for them.

So the problem is that when I go to display them, only one pushpin shows up no matter how much you zoom in. And my question is; what is a good way to render multiple pushpins at the exact same house address? I've seen how craigslist.org creates a spiral out of the pushpins on their new map feature, but was wondering what my other options are as that seems like a workaround at best.

Ideas?

回答1:

I solved this using Google's dynamic chart icons which allow you to put a number in the pin identifying that there are multiple markers on this exact some point. Basically, you call their "chart" url with some query params and they give you back your numbered icon which you can then place/set in the existing marker you have on that spot.

var markerImage = createMarkerImage(numDuplicates + 1);
existingMarker.setIcon(markerImage);

function createMarkerImage(text)
{
    var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=" + text + "|FF8985|000000",
    new google.maps.Size(21, 34),
    new google.maps.Point(0,0),
    new google.maps.Point(10, 34));
    return pinImage;
}

NOTE: This solution uses a deprecated google API with no end date posted.

"Important: The Image Charts portion of Google Chart Tools has been officially deprecated as of April 20, 2012. It will continue to work as per our deprecation policy."

UPDATE:
I have moved away from the above solution since it's deprecated (and has performance impact for many markers) in leiu of the same end effect of a numbered marker, but using a path of coordinates defining polygon in the shape of a marker along with a .png for the marker shadow. Only reason I used my own custom marker is because I needed to create individual markers, each with a unique color (and possibly an embedded number), which the vanilla markers don't support.

回答2:

@johntrepreneur: may I ask you how you checked if there is already a marker at same lat/lng? BTW: the shadow of markers have been removed.