Measure Complete Time Of Adding (showing) An Array Of Markers To Google Maps V3
I am trying to measure the COMPLETE time (including adding the objects to the DOM) for adding a number of markers to a google map instance, but it does not really work the way I ex
Solution 1:
I would modify your function like this:
functionaddMarkers(count) {
// map is the google.maps.Map objectvar bounds = map.getBounds();
var northEast = bounds.getNorthEast();
var southWest = bounds.getSouthWest();
var minLat = Math.min(northEast.lat(), southWest.lat());
var maxLat = Math.max(northEast.lat(), southWest.lat());
var minLng = Math.min(northEast.lng(), southWest.lng());
var maxLng = Math.max(northEast.lng(), southWest.lng());
var latDifference = maxLat - minLat;
var lngDifference = maxLng - minLng;
var latLngArray = newArray();
for (var i = 0; i < count; i++) {
var lat = minLat + Math.random() * latDifference;
var lng = minLng + Math.random() * lngDifference;
var latLng = new google.maps.LatLng(lat, lng);
latLngArray.push(latLng);
}
/////////////// MEASUREMENTS STARTING FROM HERE ////////////////////var chrono = newChrono();
google.maps.event.addListener(map, 'tilesloaded', function() {
chrono.stop();
});
google.maps.event.addListener(chrono, 'chrono_stops', function (e) {
var result = e.totalTime();
console.log(result);
});
chrono.start();
for (var i = 0; i < latLngArray.length; i++) {
var marker = new google.maps.Marker({
position: latLngArray[i]
});
marker.setMap(map);
}
}
functionChrono() {
this.startTime;
this.endTime;
}
Chrono.prototype.start = function() {
this.startTime = newDate().getTime();
};
Chrono.prototype.stop = function() {
this.endTime = newDate().getTime();
google.maps.event.trigger(this, "chrono_stops", this);
};
Chrono.prototype.totalTime = function() {
returnthis.endTime - this.startTime;
};
Consider the following example:
<!DOCTYPE html><html><head><title>Chrono demo</title><styletype="text/css">html, body{ height: 100%; height: 100%; margin: 0; padding: 0; }
#map-container{ height: 100%; width: 100%; min-width:500px; min-height:300px; }
</style><scripttype="text/javascript"src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script></head><body><divid="map-container"></div><script>var map, firstBoundChangedListener, markers =[];
functionChrono() {
this.startTime;
this.endTime;
}
Chrono.prototype.start = function () {
this.startTime = newDate().getTime();
};
Chrono.prototype.stop = function () {
this.endTime = newDate().getTime();
google.maps.event.trigger(this, "chrono_stops", this);
};
Chrono.prototype.totalTime = function () {
returnthis.endTime - this.startTime;
};
functionaddMarkers(count) {
console.log("Entering addMarkers function...");
// map is the google.maps.Map objectvar bounds = map.getBounds();
var northEast = bounds.getNorthEast();
var southWest = bounds.getSouthWest();
var minLat = Math.min(northEast.lat(), southWest.lat());
var maxLat = Math.max(northEast.lat(), southWest.lat());
var minLng = Math.min(northEast.lng(), southWest.lng());
var maxLng = Math.max(northEast.lng(), southWest.lng());
var latDifference = maxLat - minLat;
var lngDifference = maxLng - minLng;
var latLngArray = newArray();
for (var i = 0; i < count; i++) {
var lat = minLat + Math.random() * latDifference;
var lng = minLng + Math.random() * lngDifference;
var latLng = new google.maps.LatLng(lat, lng);
latLngArray.push(latLng);
}
/////////////// MEASUREMENTS STARTING FROM HERE ////////////////////var chrono = newChrono();
google.maps.event.addListener(chrono, 'chrono_stops', function (e) {
var result = e.totalTime();
console.log(result);
});
chrono.start();
for (var i = 0; i < latLngArray.length; i++) {
var marker = new google.maps.Marker({
position: latLngArray[i],
title: "Marker: " + i
});
markers.push(marker);
google.maps.event.addListener(marker, "map_changed", function () {
console.log("map_changed");
});
marker.setMap(map);
}
chrono.stop();
console.log("Leaving addMarkers function...");
}
functioninitialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 8,
center: latlng
};
map = new google.maps.Map(document.getElementById('map-container'), mapOptions);
firstBoundChangedListener = google.maps.event.addListener(map, "bounds_changed", function () {
if (firstBoundChangedListener) google.maps.event.removeListener(firstBoundChangedListener);
addMarkers(10000);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script></body></html>---------------------- EDITED ----------------------
To see that open two tabs. In one tab you do whatever you want and in the other tab you run your application (or my modified demo) and you open the Developer Tools and undock it. Then you go back on you another tab (where you're doing what you want). Like that the browser is showing another page but not the page with the demo.
Then you go to the undocked developer tools window and refresh the page (press F5 key). You look at the debug and you wait for the "Leaving addMarkers function...." message, you wait as long as you want so that you know all the possible asynchronouly loaded has finished and then you go to the tab with the demo.
You will see as the markers somehow were asynchronously loaded, but it is only the browser rendering them.
Only it seems to me like that, I'm not sure of that.
Post a Comment for "Measure Complete Time Of Adding (showing) An Array Of Markers To Google Maps V3"