/** * Google Maps API V3 with jQuery * * One Thousand Markers loaded fast using document.createDocumentFragment(); * * @author Nick Johnson {@link http://nickjohnson.com} * @link http://nickjohnson.com/b/ */ $(document).ready(function(){ var southWest = new google.maps.LatLng(40.744656,-74.005966); // Los Angeles, CA var northEast = new google.maps.LatLng(34.052234,-118.243685); // New York, NY var lngSpan = northEast.lng() - southWest.lng(); var latSpan = northEast.lat() - southWest.lat(); function MyOverlay( options ) { this.setValues( options ); this.markerLayer = $('
').addClass('overlay'); }; // MyOverlay is derived from google.maps.OverlayView MyOverlay.prototype = new google.maps.OverlayView; MyOverlay.prototype.onAdd = function() { var $pane = $(this.getPanes().overlayImage); // Pane 4 $pane.append( this.markerLayer ); }; MyOverlay.prototype.onRemove = function() { this.markerLayer.remove(); }; MyOverlay.prototype.draw = function() { var projection = this.getProjection(); var zoom = this.getMap().getZoom(); var fragment = document.createDocumentFragment(); this.markerLayer.empty(); // Empty any previous rendered markers for(var i = 1; i < 1001; i++){ // Determine a random location from the bounds set previously var randomLatlng = new google.maps.LatLng( southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random() ); var randomLocation = projection.fromLatLngToDivPixel( randomLatlng ); var $point = $('