Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A sampling of code for loading/unloading thousands of points as the user pans around the map.
function requestMarkers() {
// no loading markers when zoomed way out
if (map.getZoom() < 11) { return };
// start dropping markers before the browser bogs down
if (markers.length > 50) {
dropSuperfluousMarkers();
}
$.ajax({
// [snip typical ajax data request]
success: populateMarkers,
});
}
// add the markers from pointsData if they haven't already been placed
function populateMarkers(pointsData, status, xhr) {
for (var i = 0, ii = pointsData.length; i < ii; i++) {
var lat = pointData.geom.x;
var lng = pointData.geom.y;
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
draggable: false,
animation: google.maps.Animation.DROP, // whee!
flat: true, // disables some styling DOM elements for a faster marker
});
// hash the marker position
coordHash = calculateCoordinateHash(marker);
/*
if we haven't seen this hash, add the marker and mark as seen
without this, the markers array quickly grows unwieldy as duplicate points
are loaded
*/
if(seenCoordinates[coordHash] == null) {
seenCoordinates[coordHash] = 1;
markers.push(marker);
marker.setMap(map);
}
}
}
// turn marker coordinates into a hash key
function calculateCoordinateHash(marker) {
var coordinatesHash = [ marker.getPosition().lat(),
marker.getPosition().lng() ].join('');
return coordinatesHash.replace(".","").replace(",", "").replace("-","");
}
// remove markers that aren't currently visible
function dropSuperfluousMarkers() {
mapBounds = map.getBounds();
for (var i = 0, ii = markers.length; i < ii; i++) {
if (!markers[i]) {continue};
if (!mapBounds.contains(markers[i].getPosition())) {
// remove from the map
markers[i].setMap(null);
// remove from the record of seen markers
coordHash = calculateCoordinateHash(markers[i]);
if(seenCoordinates[coordHash]) {
seenCoordinates[coordHash] = null;
}
// remove from the markers array
markers.splice(i, 1);
}
}
}
// clear all markers from the map, empty the markers array and seen markers
function clearMarkers() {
for (var i = 0, ii = markers.length; i < ii; i++) {
markers[i].setMap(null);
}
markers = [];
seenCoordinates = {};
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment