If you have more than 10k markers on your map, you definitely don’t want to display all of them while the user is zoomed out as far as they can zoom. This is where your awesome math skills come into play. With a javascript plugin called MarkerManager you can create levels of markers that will display as the user zooms in.
For example: You have a map with addresses in Europe and USA. You can display a USA flag on the US continent and a EURO flag over Europe– And as the user zooms in, those icons disappear (because you can’t see both USA and Europe), and your addresses begin to appear. But even at the country view, there may still be 5-10k markers to display. Here is how you can create some general markers that will somewhat group your exact addresses into a single marker.
This explanation assumes you already have a database with latitude and longitude setup. If you need to convert your addresses, id check out this tutorial first.
What we will do is create a nifty SQL query that will group the locations by rounding them to a certain threshold:
SELECT *, ROUND(latitude + longitude, ?) as distance_group FROM your_address_table GROUP BY distance_group;
Replace the question mark with a number like 1 or 0 in order to group the locations in a wider radius or a smaller radius. Basically what this is doing is taking a latitude and longitude that would accurately be: 37.8273849, -117.3928473 and rounding them to 37.8, -117.4 and then adding them: -79.6. That number is just a key to group locations. Any numbers around this latitude and longitude will add up to -79.6 which means the latitude and longitude will be represented by a grouping icon / marker.
Then with marker manager, you would setup your script to where the top zoom levels (0->5) would be the map, (6-9) would be the general markers that you rounded (previous paragraph), and (10+) would be your exact address locations.
This means that as your user zooms in, they will go through the top zoom images (your flags), then the approximated icons (your generated markers), and then reach their final views of your exact addresses.
Example extracted from marker manager blog.
function setupMap() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.setCenter(new GLatLng(41, -98), 4);
window.setTimeout(setupWeatherMarkers, 0);
}
}
function getWeatherMarkers(n) {
var batch = [];
for (var i = 0; i < n; ++i) {
batch.push(new GMarker(getRandomPoint(),
{ icon: getWeatherIcon() }));
}
return batch;
}
function setupWeatherMarkers() {
mgr = new GMarkerManager(map);
mgr.addMarkers(getWeatherMarkers(20), 3);
mgr.addMarkers(getWeatherMarkers(200), 6);
mgr.addMarkers(getWeatherMarkers(1000), 8);
mgr.refresh();
}