Created
January 1, 2011 23:29
-
-
Save sdball/762110 to your computer and use it in GitHub Desktop.
A sampling of code for loading/unloading thousands of points as the user pans around the map.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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