Google Maps - Panning and Zooming into areas - markers not appearing when I zoom in or pan

Question

I'm implementing some boundary based clustering on the server end of markers to display on my google maps. What I'm doing is that I have a function that is called everytime the map is moves or panned or zoomed which takes the bound of the map and makes an ajax call which in turn the server side script runs a simple sql query to retrieve the markers and clusters them. SO far teh clustering part is working nicely however sometimes the getBounds doesn't seem to be sending the correct boundaries I feel.

Like I may pan a map a bit on the side and regions which used to have markers now all of a sudden don't have markers and the map is blank. I checked the sql query and from the query itself it shows an outrageously different bounds than what would be expected.

Take a look at the regions below:

The first one shows all the markers.

The one following however has just moved a bit to the top and left but half the region is the same as in the previous picture however there are no markers at all. I have isolated the issue to be with the getBounds function of the maps.

This is my javascript code which gets the bounds and makes the call:

var bounds = map.getBounds();
var southWest = bounds.getSouthWest();

var northEast = bounds.getNorthEast();
var data = {ne:northEast.toUrlValue(), sw:southWest.toUrlValue(), zoom:map.getZoom()};
//something getting messed up in the code above this point

$.ajax({
    type: "POST",
    url: 'maps/get-markers',
    data: {object:$.toJSON(data)},
    dataType: 'json',

    success: function(response) {
        //code to add markers
    }
});

On my server side code this is the php used to get the items based upon the coordinates:

$data =  Zend_Json::decode(stripslashes($this->_request->getParam('object')));

//retrieve the variables from the GET vars
list($nelat, $nelng) = explode(',', $data['ne']);
list($swlat, $swlng) = explode(',',$data['sw']);

//clean the data
$nelng  =   (float)$nelng;
$swlng  =   (float)$swlng;
$nelat  =   (float)$nelat;
$swlat  =   (float)$swlat;

$ubound = $swlng > $nelng ? $swlng : $nelng;
$lbound = $swlng > $nelng ? $nelng : $swlng;

$sql = 'SELECT `a`.* FROM `locations` AS `a` WHERE (a.`longitude` > $lbound) AND (a.`longitude` < $ubound) AND';

$ubound = $swlat > $nelat ? $swlat : $nelat;
$lbound = $swlat > $nelat ? $nelat : $swlat;


$sql .= ' (a.`latitude` >= $lbound) AND (a.`latitude` <= $ubound)';

I'm suspecting its the getbounds function in the javascript but need to fix it asap. Any ideas please :(

Answer 1

I have a page that works exactly the same way that you have described yours. Here's how I get the bounds:

var bounds = map.getBounds();
var sw = bounds.getSouthWest();
var ne = bounds.getNorthEast();
var s = sw.lat();
var w = sw.lng();
var n = ne.lat();
var e = ne.lng();

I then send each value to the server. I previously checked for points within the bounds with a query like this:

WHERE (lat BETWEEN $sBound AND $nBound) AND (lng BETWEEN $wBound AND $eBound)

However, I recently discovered that this query fails when the bounds area includes the international date line. This doesn't look like the problem that you're having (it's probably happening in parsing the bounds), but it's definitely something you should consider. Here's how I fixed it:

if ($wBound > $eBound) { // if bounds includes the intl. date line
    $sql .= "WHERE (lat BETWEEN $sBound AND $nBound) AND ((lng BETWEEN -180 AND $eBound) OR (lng BETWEEN $w AND 180))";
} else {
    $sql .= "WHERE (lat BETWEEN $sBound AND $nBound) AND (lng BETWEEN $wBound AND $eBound)";
}

Answer 2

If this is literally copied from the code:

$sql .= ' (a.`latitude` >= $lbound) AND (a.`latitude` <= $ubound)';

then the issue may simply be that you're using single quotes rather than double on the PHP literals. As such, the $lbound and $ubound interpolation doesn't happen, and you're using an invalid SQL query.

Try:

$sql .= " (a.`latitude` >= $lbound) AND (a.`latitude` <= $ubound)";

etc.