How do I dynamically add points to a Google Map when the bounds change?

Question

I can currently place static points in the map window:

var latlng = new GLatLng(lat, lng);
map.addOverlay(new GMarker(latlng, markerOptions));

And I know how to get the bounds of the window. I can also code a page that will take the bounds and return the points that are inside them in any format.

The problems I have now:

1. Does the moveend event capture all moves, including zoom changes? Or do I need to watch for that event separately?
2. How should I call my external datasource? (should I just do a JQuery $.get request?)
3. What should that datasource return?
4. How do I display that data on the map?

Answer 1

I'm currently doing something very similar to this, along with clustering on the server.

1. Yes, moveend will capture zoom changes.
2. If you're already using jQuery, a $.get request would work great.
3. I have tried returning both XML and JSON. These worked fine, but I discovered that parsing through these data formats caused the application to get significantly slower as more points were added to the database. I now return plain Javascript which I execute with eval(). I don't have a problem with this since I completely trust the source of the Javascript (me).
4. The Javascript function which adds a marker contains only the latitude, longitude, and id of the marker. The page already contains a Javascript array with all of the data for each marker, which can be accessed when the marker is clicked on.

That's how I'm doing it, but you could certainly accompish what you want to do with a number of methods.

Answer 2

Hey Matt-

Here is a great example of making external calls to a data source from google: Google Maps PHP and SQL

If you're storing the points in just an external javascript file then I would recommend using JSON format over XML as the XML parser that google maps uses is much slower than json.

1. Moveend yes captures any kind of changes.
2. If you're using only an external XML file then you can use google's function to call and download the XML file (seen in the link above), otherwise I would create a file that can be updated, and parse with json.
3. I believe it should return a JSON as i've discovered it is much quicker than XML parsing.
4. You would parse through the array and create a marker with each of these. Here is a good example of using json:

Jquery and Google Maps

Good Luck!

Answer 3

I'm using this in one of my sites. I think it's exactly what you are looking for. But be warned "gmaps-utility-library" plugins have some buggy/bad code so it's a good idea to go over it and double check if everything is working as it should (I haven't encountered any bugs in marker manager but in some other plugins from that library).

Here's reference and examples.

Even if you want to code your own this one is probably a good starting point.

EDIT

My answer for 3-4:

It really depends on situation. If it's static (you just need to manage a lot points on map > 300) then you could serve all points together with the page where the map is located in (as JavaScript array for example). If user interacts with data then probably it's better to use AJAX. If you use jQuery (or any other JS library) in your site then use ajax function from that library if not then go with the one which comes from gmaps. It's because it's nice to use same AJAX function in whole site instead of using 2 which does the same job.

If you are taking AJAX path you have 2 options:

1. Load all markers for whole map in one request.
2. Load markers that shows up on user screen + small margin.

If you expect that user wants to see the big picture or that he will want to see all/most of the points then go for option 1 + marker manager (like the one I recommended or your own similar).

If there's really a lot of points and user will never be interested in most of them then go for option 2 + manager or just this simple algorithm: Clear map -> Request points for map window bounds + magin / (Cache) -> Draw points -> Repeat for each move/zoom.

From personal experience (I've used both AJAX options) marker manager does quite nice job, can handle a lot points and overall user experience is a lot smoother then loading points for just viewport. Requesting new points and drawing them on map is quite laggy/choppy. Of course it depends on amount of points.