5

Here is my Google Maps "Setup"

  • I read from database the locations of all markers (under 300) - sent those into javascript as Json
  • On javascript i parse the json, look trough marker array and create a new google.maps.Marker. For each marker i add an event for clicl that will open a infobox (infoBox.js) with a main picture and some custom details. After that i create clusters( using MarkerClusterer) and everything works well (at least for 3-400 markers)

I want to expand and display up to 10k of markers ( using MarkerClusterer).What will be the best approach ?

I was thinking into writing all markers data into a file(as javascript array or xml) and have javascript reading from there since will not be practical to query the database for 10k locations. Do you advise otherwise ?

Should i use the same looping trough array and put one marker at a time ? I looked over kml layers but it seems i cannot navigate trough markers (i have a prev/next location feature) and i may not be able to use the infobox.js ?

Any advice ?

Crerem
  • 1,289
  • 2
  • 18
  • 45
  • 3
    https://developers.google.com/maps/articles/toomanymarkers – geocodezip Dec 06 '13 at 18:37
  • 1
    already using Cluster solution presented in there but how to load the 10k info of markers ? – Crerem Dec 06 '13 at 19:56
  • Apart from the clustering: I would suggest to use a FusionTablesLayer, you would be able to use infobox.js, the prev/next-feature would be possible and there are no performance-issues, no matter if you have 1000 or 50000 markers – Dr.Molle Dec 06 '13 at 20:43
  • The previously cited link above now redirects to here: https://developers.google.com/maps/documentation/javascript/marker-clustering – pattivacek Jan 28 '17 at 23:00

1 Answers1

5

As @geocodezip mentioned have a look at that doc, and rather than looking at the Cluster solution take a look at the Viewport Marker Management section.

Provided your database supports geospatial queries, you can make a request to return only markers within a given bounds once the map is idle.

google.maps.event.addListener(map, 'idle', function(){
    var bounds = map.getBounds(); //returns an object with the NorthEast and SouthWest LatLng points of the bounds

    //make the AJAX request passing in your `bounds`

    /*in the AJAX callback remove the current markers from the map and the cluster object, 
    and add the new ones along with their event handlers and re-add to the cluster object as well*/

});
Suvi Vignarajah
  • 5,758
  • 27
  • 38