I’ve implemented a google map which loads the markers according the current viewport. This can result in a lot of requests if a user is panning / zooming wildly.
Here’s a pattern which cancels requests and only processes the last one:
// Globals
var currentRequestID = 0;
var currentRequest;
var requestTimer;
// Add the Event for reloading the Markers
google.maps.event.addListener(map, 'idle', function () {
SingleProcessMarkerLoading(map);
});
function SingleProcessMarkerLoading(map) {
// Clear the "Queue"
clearTimeout(requestTimer);
// Abort if a Request is running
if (currentRequest) { currentRequest.abort(); }
// Start a new Request
requestTimer = setTimeout(function () {
// Get the RequestID, increase for the next Request
localRequestID = ++currentRequestID;
// Load the markers
LoadMarkersForCurrentViewport(map, localRequestID);
}, 500);
}
function LoadMarkersForCurrentViewport(map, localRequestID) {
// Get the current Bounds
var bounds = map.getBounds();
// Get the Points
var swPoint = bounds.getSouthWest();
var nePoint = bounds.getNorthEast();
// Get the Coordinates
var swLat = swPoint.lat();
var swLng = swPoint.lng();
var neLat = nePoint.lat();
var neLng = nePoint.lng();
// Calculate an Adjustment for increasing the Viewport a little
var increasePercentage = 0.1;
var latAdjustment = ((neLat - swLat) * increasePercentage);
var lngAdjustment = ((neLng - swLng) * increasePercentage);
// Adjust
swLat -= latAdjustment;
swLng -= lngAdjustment;
neLat += latAdjustment;
neLng += lngAdjustment;
// Build the Url to get the Markers for the Viewport
var url = 'someurl?' + swLat + '|' + swLng + '|' + neLat + '|' + neLng;
// Get the JSON-Response and process it
currentRequest = $.get(url, function (data) {
// Check if the Request is obsolete
if (localRequestID != currentRequestID) return;
// Process the Data here
});
return;
}