CODEWITHSUNDEEP
phpjavascriptgoogle-maps
geoffs3310
geoffs3310

Reputation: 14008

What is the best way to display a google map with over 7000 place markers on it

I am using the googlemaps V3 codeigniter class with codeigniter (obviously) to loop through location from my database and output a map with all the location plotted on it. The trouble is I have over 7000 placemarkers, so the generated javascript is massive and page load time is very slow. Is there a better way of outputting this map to reduce overheads?

I have clustered the markers but when the map is loading sometimes the browser will freeze while its contacting google

Thanks

Upvotes: 0

Views: 801

Answers (2)

Fgblanch
Fgblanch

Reputation: 5295

I think the problem is that if you have that amount of markers in memory browsers get really slow.

I had a similar problem some time ago and what we finally did was to load only the visible markers and load / unload them when the user pans or zooms via AJAX. it is quite easy to implement using the events moveend and zoomend.

 // Listeners

 GEvent.addListener(map2, "moveend", function() {            
         map2.clearOverlays();
         // Load markers for the current bounds and current zoom level 
         loadMarkers(map2,map2.getBounds(),map2.getBoundsZoomLevel(map2.getBounds()));
 });

 GEvent.addListener(map2, "zoomend", function() {
        map2.clearOverlays();
        // Load markers for the current bounds and current zoom level 
       loadMarkers(map2,map2.getBounds(),map2.getBoundsZoomLevel(map2.getBounds()));
 });

And for the lower zoom levels when a lot of marker have to be shown , we clustered them on the server side and only load the marker that represente each cluster.

Another way to achieve this that is a bit more complicated is to render the makers in a custom overlay tiles in the server side. But I think you will need a map server to do it so. you can read more about it in the google maps documentation

http://code.google.com/intl/en/apis/maps/documentation/javascript/examples/overlay-simple.html

Upvotes: 3

bsrykt
bsrykt

Reputation: 1335

You can try,

  1. Server side clustering (Example)
  2. Rendering the markers on the server (Article: Too Many Markers)

Upvotes: 1

Related Questions