google maps api v2 - dynamic load (tens of thousands of) markers

Question

Hello,

how made with JavaScript+PHP+MYSQL and Google Maps API v2 dynamic load of markers?

atm I have map follow example

http://googlemapsapi.martinpearman.co.uk/infusions/google_maps_api/basic_page.php?map_id=8

but my marker_data_01.php (where are all markers listed -> look code of example) have atm 4MB and will only have more, and more.

So the question is: how load only this markers to marker_data_01.php (of some other modification of it, can be on same file as map, meaningless, I load it all from MySQL atm)

what I look now:
so for example (I dont know what number will good but I write this only for show what I wanna made OR JUST something like it), so

• top left corner for example have position: 10,
• top right corner for example have position: 30,
• bottom left corner for example have position: 5,
• bottom right corner for example have position: 15.

-- so load only this markers what are in this box 10-30-5-15

with for example GET,

and when I move map for example to 17-12-48-20 box then made next GET request
and with this mysql quote and download next markers that what I see now,

with this I can have map with unlimited markers,

and when will be a lot of markers then clustering can link them,

so with this ppl dont will need do "preload" of all markers DB (what have 4mb now and will have more), but only download that what they see at the moment,

I know that is possible because a lot sites have it but I am not master of code langs, I know only a bit php and mysql (and html) :)

// sorry for my english

Answer 1

Seems to me that you're looking for something like MarkerClusterer

EDIT

I see - I didn't get the original ask very clearly.

What you need to do is send the current lat/lon box to the server, and use those values in your WHERE clause.

Here's a quick example

// Create a GMap2 instance
var gmap = new GMap2( document.getElementById( 'map' );

// Do all your setup here, like gmap.setCenter() and such

// Now, load the map data
loadMapFromCurrentBounds( gmap );

// Assign a handler to the "moveend" event
GEvent.addListener( gmap, 'moveend', function()
{
  loadMapFromCurrentBounds( gmap );
});

function loadMapFromCurrentBounds( gmap )
{
  // First, determine the map bounds
  var bounds = gmap.getBounds();

  // Then the points
  var swPoint = bounds.getSouthWest();
  var nePoint = bounds.getNorthEast();

  // Now, each individual coordinate
  var swLat = swPoint.lat();
  var swLng = swPoint.lng();
  var neLat = nePoint.lat();
  var neLng = nePoint.lng();

  // Now, build a query-string to represent this data
  var qs = 'swLat=' + swLat + '&swLng=' + swLng + '&neLat=' + neLat + '&neLng=' + neLng;

  // Now you can use this query-string in your AJAX request  

  // AJAX-stuff here
}

And then, on the PHP end, assuming your data table has a lat and lng column, something like this

$swLat = mysql_real_escape_string( $_GET['swLat'] );
$swLng = mysql_real_escape_string( $_GET['swLng'] );
$neLat = mysql_real_escape_string( $_GET['neLat'] );
$neLng = mysql_real_escape_string( $_GET['neLng'] );

$query = "
SELECT *
  FROM [Table]
 WHERE lat > $swLat
   AND lat < $neLat
   AND lng > $swLng
   AND lng < $neLng
";