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:
function addMarkers(count) {
// map is the google.maps.Map object
var 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 = new Array();
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 = new Chrono();
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);
}
}
function Chrono() {
this.startTime;
this.endTime;
}
Chrono.prototype.start = function() {
this.startTime = new Date().getTime();
};
Chrono.prototype.stop = function() {
this.endTime = new Date().getTime();
google.maps.event.trigger(this, "chrono_stops", this);
};
Chrono.prototype.totalTime = function() {
return this.endTime - this.startTime;
};
Consider the following example:
<!DOCTYPE html>
<html>
<head>
<title>Chrono demo</title>
<style type="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>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
</head>
<body>
<div id="map-container"></div>
<script>
var map, firstBoundChangedListener, markers =[];
function Chrono() {
this.startTime;
this.endTime;
}
Chrono.prototype.start = function () {
this.startTime = new Date().getTime();
};
Chrono.prototype.stop = function () {
this.endTime = new Date().getTime();
google.maps.event.trigger(this, "chrono_stops", this);
};
Chrono.prototype.totalTime = function () {
return this.endTime - this.startTime;
};
function addMarkers(count) {
console.log("Entering addMarkers function...");
// map is the google.maps.Map object
var 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 = new Array();
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 = new Chrono();
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...");
}
function initialize() {
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"