Adding Thousands of Google Map API V3 Markers
I am currently building a demo application that should display 28,000 markers on a map without using any type of clustering. The problem is adding a marker to the map as many suffer for so long the browser crashes! Here is the current process
-Retrieves displays points from the database including LAT and LONG (not necessary for geocoding) - to loop through each return value and does the following:
var marker = new google.maps.Marker({
position: point,
animation: google.maps.Animation.DROP,
map: map,
title: value.Title,
icon: icons['store']
});
google.maps.event.addListener(marker, 'click', function () {
var hidingMarker = currentPlace;
var slideIn = function (marker) {
$('#Name', info).text(place.Title);
$('#Phone', info).text(place.Description);
$('#Address', info).text(place.Proper_Address);
$('#LastSale', info).text("Last Sale:" + place.Last_Sale);
info.animate({ right: '0%' });
}
- markers come in and the user can click on any of them to see some information.
Is there a better way to do this so that it is possible to show 28,000 without having to cluster them? I found a few scripts people have written to handle these before, but they are all for the V2 api. Any links or code is greatly appreciated! thank!
source to share
In my experience, the only real way to show that many markers on the map at the same time is to use fusion tables (which have some limitations and other issues to work on). All other solutions to handle these many markers involve some form of clustering or will not work at wide magnification.
source to share
I'm assuming you literally don't screen 28,000 right away? Will only a subset be visible?
If so, why don't you just make a request to the server with the range of coordinates that you are showing, and just talk? There are map events that let you know when markers need to be updated and you could avoid having too many objects in the browser at once.
source to share