Flauschig Dev. Blog

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;
}