First we need the boundaries of the current map:
var max_lng = map.getBounds().getNorthEast().lng();
var max_lat = map.getBounds().getNorthEast().lat();
var min_lng = map.getBounds().getSouthWest().lng();
var min_lat = map.getBounds().getSouthWest().lat();
These variables much be send to the page which returns the markers, this probably is already the case.
<cfquery name="GetMarkers" datasource="source">
SELECT id, lat, lng
FROM markers
WHERE
(<cfif min_lat lt max_lat>lat <= #max_lat# and lat>= #min_lat#<cfelse>lat <= #max_lat# OR lat>= #min_lat#</cfif>) AND
(<cfif min_lng lt max_lng>lon <= #max_lng# and lon>= #min_lng#<cfelse>lon <= #max_lng# OR lon>= #min_lng#</cfif>)
</cfquery>
<!--- Root of the number of grids: for example 10 means 100 grids --->
<cfset grid_count_root = 30 />
<cfset grid_min_lng = min_lng />
<cfset grid_min_lat = min_lat />
<!--- Array that contains the grid --->
<cfset grid_arr = arrayNew(2) />
<cfset grid_arr_lng = arrayNew(2) />
<cfset grid_arr_lat = arrayNew(2) />
<cfset grid_with_data = arrayNew(1) />
<cfset grid_lng_div = abs((min_lng-max_lng)/grid_count_root) />
<cfset grid_lat_div = abs((min_lat-max_lat)/grid_count_root) />
Now we are ready to create the grid:
<cfloop from=1 to=#grid_count_root# index="i">
<cfset grid_arr_lng[i][1] = grid_min_lng />
<cfset grid_arr_lng[i][2] = grid_min_lng + grid_lng_div />
<cfset grid_arr_lat[i][1] = grid_min_lat />
<cfset grid_arr_lat[i][2] = grid_min_lat + grid_lat_div />
<cfset grid_min_lng = grid_min_lng + grid_lng_div />
<cfset grid_min_lat = grid_min_lat + grid_lat_div />
</cfloop>
<cfloop from=1 to=#arraylen(grid_arr_lng)# index="i">
<cfloop from=1 to=#arraylen(grid_arr_lng)# index="j">
<cfset cur_pos = arrayLen(grid_arr)+1 />
<cfset grid_arr[cur_pos][1] = grid_arr_lng[i][1] />
<cfset grid_arr[cur_pos][2] = grid_arr_lng[i][2] />
<cfset grid_arr[cur_pos][3] = grid_arr_lat[j][1] />
<cfset grid_arr[cur_pos][4] = grid_arr_lat[j][2] />
<cfset grid_arr[cur_pos][5] = '' />
<cfset grid_arr[cur_pos][6] = '' />
<cfset grid_arr[cur_pos][7] = '' />
<cfset grid_arr[cur_pos][8] = 0 />
</cfloop>
</cfloop>
Almost there now we load the markers into the grid
<cfloop from=1 to=#GetMarkers.recordcount# index="i">
<cfset lng_grid_pos = #evaluate((GetMarkers.lng[i] -min_lng)/grid_lng_div)# />
<cfif lng_grid_pos gt 0><cfset lng_grid_pos= #evaluate((ceiling(lng_grid_pos-1)*grid_count_root)+1)#>
<cfelse><cfset lng_grid_pos = 1 /></cfif>
<cfset lat_grid_pos = #evaluate((GetMarkers.lat[i] -min_lat)/grid_lat_div)# />
<cfif lat_grid_pos gt 0><cfset lat_grid_pos= #evaluate((ceiling(lat_grid_pos-1)))#>
<cfelse><cfset lat_grid_pos = 0 /></cfif>
<cfset grid_pos = #evaluate(lng_grid_pos+lat_grid_pos)# />
<cfif grid_arr[grid_pos][5] eq ''>
<cfset grid_arr[grid_pos][5] = GetMarkers.id[i] />
<cfset grid_arr[grid_pos][6] = GetMarkers.lat[i] />
<cfset grid_arr[grid_pos][7] = GetMarkers.lng[i] />
<cfset grid_with_data[arraylen(grid_with_data)+1] = grid_pos />
</cfif>
<cfset grid_arr[grid_pos][8] = grid_arr[grid_pos][8]+1 />
</cfloop>
