Google Maps - Thousands of markers - JSON

Question

In the following example the markers are loaded from a JSON.

If there are 20,000 markers the JSON is going to be quite big.

Is there any way to send different JSON files according to zoom level instead of sending one huge array?

http://gmaps-utility-library.googlecode.com/svn/trunk/markermanager/release/examples/weather_map.html

Answer 1

Possible ways to solve this problem:

• Build the JSON on serverside, depending to the zoomlevel (con: needs reload after a zoom, pro: only small amouts of data need to be loaded)
• Include the informations about how a marker is accessible in the JSON data (pro: only one time data need to be loaded, con: iterate through the data with JavaScript)
• Calculate visible markers in JavaScript (pro: very dynamic, con: heavy calculation load)

Answer 2

There's the notion of a "bounding rectangle" for a map view. The map api supplies this to you as two lat/long coordinate pairs - one for the SW corner, and one for the NE corner.

So if you have a custom data service that returns JSON points, you'll need to accept these coordinates as input, and adjust the returned dataset accordingly (most likely as a WHERE clause in your SELECT statement).

I don't have the details of getting this bounding rectangle memorized, but that's what API docs are for.

Answer 3

Yes, I did something similar in an application for a local authority where we were displaying the volume each house recycled across 6,000 odd households. As the total volume of data (which included address and statistical info for each household) was quite large pulling back the whole data file in one go caused the browser to appear to hang.

So instead in the AJAX call to the database we sent the bounding rectangle coordinates (latitude,longitude) of the map area then only returned those points that we visible. Because of the nature of the application a user-driven button to 'fetch data' was quite acceptable, but there's obviously lots of other variations you can play on the theme - once you are delivering the bounding coordinates to the server side you can decide what to do there - for instance only return a subset if the zoom level is too high. You should be able to catch the map draw event too and action this automatically.

Answer 4

When the zoom changes, send the new zoom level to your JSON service and return the markers that should be visible at that level. Use addMarkers() to add the results to MarkerManager and make them visible only at the current zoom level.

The other responses here have suggested returning only the markers within the current view, but you could also just return all of the markers at that zoom level. It depends on how much you know about which markers you want to show at each level.