Cluster same lat/lng gmaps v3
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 supe开发者_如何学Cr 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
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
});
}
Thought I'd paste my code:
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(47.614495, -122.341861), 2);
map.enableScrollWheelZoom();
GDownloadUrl("world_xml.php", function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var first_name = markers[i].getAttribute("first_name");
var last_name = markers[i].getAttribute("last_name");
var email = markers[i].getAttribute("email");
var affiliation = markers[i].getAttribute("affiliation");
var status = markers[i].getAttribute("status");
var service = markers[i].getAttribute("service");
var rank = markers[i].getAttribute("rank");
var specialty = markers[i].getAttribute("specialty");
var city = markers[i].getAttribute("city");
var state = markers[i].getAttribute("state");
var country = markers[i].getAttribute("country");
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var marker = createMarker(point, rank, first_name, last_name, email, affiliation, status, service, specialty, city, state, country);
map.addOverlay(marker);
}
});
} }
function createMarker(point, rank, first_name, last_name, email, affiliation, status, service, specialty, city, state, country) {
var marker = new GMarker(point);
var html = "" + rank + " " + first_name + " " + last_name + "
" + service + ", " + status + "
" + specialty + "
" + affiliation + "
" + city + ", " + state + " " + country + "
" + email + "
" + " ";
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
精彩评论