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.<\/p>\n
Here’s a pattern which cancels requests and only processes the last one:<\/p>\n
\r\n\/\/ Globals\r\nvar currentRequestID = 0;\r\nvar currentRequest;\r\nvar requestTimer;\r\n\r\n\/\/ Add the Event for reloading the Markers\r\ngoogle.maps.event.addListener(map, 'idle', function () {\r\n\tSingleProcessMarkerLoading(map);\r\n});\r\n\r\nfunction SingleProcessMarkerLoading(map) {\r\n\t\/\/ Clear the "Queue"\r\n\tclearTimeout(requestTimer);\r\n\t\/\/ Abort if a Request is running\r\n\tif (currentRequest) { currentRequest.abort(); }\r\n\t\/\/ Start a new Request\r\n\trequestTimer = setTimeout(function () {\r\n\t\t\/\/ Get the RequestID, increase for the next Request\r\n\t\tlocalRequestID = ++currentRequestID;\r\n\t\t\/\/ Load the markers\r\n\t\tLoadMarkersForCurrentViewport(map, localRequestID);\r\n\t}, 500);\r\n}\r\n\r\nfunction LoadMarkersForCurrentViewport(map, localRequestID) {\r\n\t\/\/ Get the current Bounds\r\n\tvar bounds = map.getBounds();\r\n\r\n\t\/\/ Get the Points\r\n\tvar swPoint = bounds.getSouthWest();\r\n\tvar nePoint = bounds.getNorthEast();\r\n\r\n\t\/\/ Get the Coordinates\r\n\tvar swLat = swPoint.lat();\r\n\tvar swLng = swPoint.lng();\r\n\tvar neLat = nePoint.lat();\r\n\tvar neLng = nePoint.lng();\r\n\r\n\t\/\/ Calculate an Adjustment for increasing the Viewport a little\r\n\tvar increasePercentage = 0.1;\r\n\tvar latAdjustment = ((neLat - swLat) * increasePercentage);\r\n\tvar lngAdjustment = ((neLng - swLng) * increasePercentage);\r\n\r\n\t\/\/ Adjust\r\n\tswLat -= latAdjustment;\r\n\tswLng -= lngAdjustment;\r\n\tneLat += latAdjustment;\r\n\tneLng += lngAdjustment;\r\n\r\n\t\/\/ Build the Url to get the Markers for the Viewport\r\n\tvar url = 'someurl?' + swLat + '|' + swLng + '|' + neLat + '|' + neLng;\r\n\r\n\t\/\/ Get the JSON-Response and process it\r\n\tcurrentRequest = $.get(url, function (data) {\r\n\t\t\/\/ Check if the Request is obsolete\r\n\t\tif (localRequestID != currentRequestID) return;\r\n\t\t\/\/ Process the Data here\r\n\t\t});\r\n\treturn;\r\n}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"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 … <\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3],"tags":[122,121,120,119],"class_list":{"0":"entry","1":"post","2":"publish","3":"author-roemer","4":"post-314","6":"format-standard","7":"category-programming","8":"post_tag-bounds","9":"post_tag-google","10":"post_tag-maps","11":"post_tag-viewport"},"acf":[],"views":1586,"_links":{"self":[{"href":"http:\/\/dev.flauschig.ch\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/314"}],"collection":[{"href":"http:\/\/dev.flauschig.ch\/wordpress\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/dev.flauschig.ch\/wordpress\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/dev.flauschig.ch\/wordpress\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/dev.flauschig.ch\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=314"}],"version-history":[{"count":0,"href":"http:\/\/dev.flauschig.ch\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/314\/revisions"}],"wp:attachment":[{"href":"http:\/\/dev.flauschig.ch\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=314"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/dev.flauschig.ch\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=314"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/dev.flauschig.ch\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=314"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}