How do you measure google maps loading times

Question

I'm working on optimization a Google Maps with a lot of pins. I want to see if what i'm doing has some impact but beside EndTime-StartTime in javascript i don;t know any other method.

Can you help me with some ideas ?

Answer 1

You can do this in two ways:

1. By adding startDate and endDate before and after the Google map's initialize method.
2. This is pretty easy, you can simply open your dev tools and within network tab you can measure the timeline of loading scripts.

After some search I found this answer, which is about console.time, Starts a timer you can use to track how long an operation takes.

Answer 2

May I suggest a different approach to this problem. While instrumenting your code will certainly help identity problem areas, I think you already know the cause of your performance issues: the number of markers drawn on the map canvas.

I faced a similar situation, and had success using the viewport management strategy to optimize the performance of a large number of items on the map. The basic theory is to handle the event the map's bounds_changed in tandem with the map's idle events. You can easily check each marker to see if it is outside the current viewport using something like:

// anonymous function that sets only the markers inside the map's viewport
// as visible; all markers outside the active viewport are set as invisible
// to boost performance
google.maps.event.addListener(map, 'bounds_changed', function() {
   // wait until the pan/zoom has stopped before processing the viewport
   google.maps.event.addListenerOnce(map, 'idle', function() {
     var bounds = map.getBounds(); 

     for (var i = 0, length = markers.length; i < length; i++) {
       marker.setVisible(bounds.contains(marker.getPosition()));
     }
   });
});

In this example screenshot from Google, only a subset of markers would be visible inside the blue bounding box using this strategy:

Adapting this strategy will likely give you the biggest bang for your buck right away compared to instrumenting your existing code.

If this isn't enough, I recommend using a recursive asynchronous function to add your markers to the screen, like:

// the Bermuda triangle 
var coords = [
    new google.maps.LatLng(25.774252, -80.190262),
    new google.maps.LatLng(18.466465, -66.118292),
    new google.maps.LatLng(32.321384, -64.75737) 
];

// a variable to keep track of markers added to the map
var markers = [];

var addMarker = function addMarker() {
  var marker,
      position;

  if (coords.length === 0) {
    return;
  }

  // dequeue a coord from the queue of coords to process
  position = coords.unshift();

  // create a marker for the coord
  var marker = new google.maps.LatLng({
     position: position,
     visible: bounds.contains(position),
     map: map
  });

  // store the reference to the new marker
  markers.push(marker);

  // recursively call this function
  // using setTimeout to wait until the JS event loop
  // is idle
  window.setTimeout(addMarker, 0);
};

// start the async processing of the coords
window.setTimeout(addMarker, 0);