Best practice for google map with lot of markers

help
1

Hello everyone.

I’m trying to implement google maps with lot of markers (marker and markerclusterer). Goal is to have at least 3000 markers on the map. So far I was using google maps api v3 and MarkerClustererPlus. Additional markers should be changed based on the date that user choose.

Here is the example of the code that I’ve used so far:

/* publication */
Meteor.publishComposite("map", function (date) {
	check(date, Date);	
	return {
		find: function() {
			return Map.find({$and: [
				{"isRemoved": false},
				{"day_of_event": {"$lte": date}}
			]}, {
				sort: {'createdAt': -1},
				limit: 3000
			});
		}
	};
});

I’ve use template level subscription

Template.googleMapsMp.onCreated(function() {
	self.autorun(function() {
		self.subscribe('map', 
			Session.get('eventYear')
		);
	});
	
	self.autorun(function () {
		if(googleMapsMP.loaded()) {
			var coll = Map.find();
			coll.observe({
				added: function(newDocument) {
					googleMapsMP.addMarker(newDocument);
				},
				changed: function(newDocument, oldDocument) {
					googleMapsMP.changeMarker(newDocument);
				},
				removed: function(oldDocument) {
					googleMapsMP.removeMarker(oldDocument._id);
				}
			});
		}
	});
});

Click on marker will show popup that also have template level subscription. googleMapsMP script handles the initialization and loading of the map, add and remove marker from map (and mapclusterer), etc.

This solution works fine till 500 markers. But when I try to load 3000 markers, I stuck with a problem that publication is more then 10 seconds (15-20 for mobile), plus time to add all markers to the map. In that period of time when user click on marker, empty popup will appear (template level subscription, before publication of the maps is ended), which kinda feels buggy. Also when user changes date, remove of publications and add new publications takes too long.

So if anyone have any idea how to make this little bit faster, I’ll appreciate that very much.

Thanks in advance!

2

I’d be looking at server-side clustering here. This article may be helpful: https://ravis.me/2015/05/29/server-side-geo-clustering-with-mongodb/

1 Like