How to limit google maps api lag when panning the map with lots of markers and polylines?

Question

My question:
How to make google maps move smother when there is a lot of markers and polylines shown on the map?

I am asking advices on an application I developed.

The issue happens only in Firefox when the map is moved up,down,left or right with the mouse.

The application shows about 1000 segments of polylines, and around 700 markers on the map.

All the data is located inside 7 KML files.

All the polylines are segments of direction from A to B so they have lots of points. So I think most of the problem is caused by the size and the number of the polylines.

Similar thread :
- Need guidance on a Google Map application that has to show 250 000 polylines
- google maps api v3 no smooth dragging
- Mapping 400MB KML data in Google Maps - how?

Thank you.

An issue has been opened for a similar problem by someone else, so I don't think I am alone in this situation.
https://code.google.com/p/gmaps-api-issues/issues/detail?id=5665

You can use a marker cluster but it's not clear from your question. — Micromega, Mar 10 '14 at 19:11
When I move the map with the mouse it's not smooth at all. And I want it to move smoothly. — jftremblay, Mar 10 '14 at 20:06

score -1 · Accepted Answer · edited May 23 '17 at 12:23

I tried a solution that improved the movement but it does not resolve completely the issue.
google maps api v3 no smooth dragging
http://jsfiddle.net/CX4gN/3/

var last = {time : new Date(),    // last time we let an event pass.
            x    : -100,          // last x position af the event that passed.
            y    : -100};         // last y position af the event that passed.
var period = 100; // ms - don't let pass more than one event every 100ms.
var space  = 40;   // px - let event pass if distance between the last and
                  //      current position is greater than 2 px.

function init_map() {
    map_div = document.getElementById("map")
    // map
    var map_options = {
        center: new google.maps.LatLng(45.836454, 23.372497),
        zoom: 8
    };
    map = new google.maps.Map(document.getElementById("map"), map_options);

    // register event handler that will throttle the events.
    // "true" means we capture the event and so we get the event
    // before Google Maps gets it. So if we cancel the event,
    // Google Maps will never receive it.
    map_div.addEventListener("mousemove", throttle_events, true);
};

function throttle_events(event) {
    var now = new Date();
    var distance = Math.sqrt(Math.pow(event.clientX - last.x, 2) + Math.pow(event.clientY - last.y, 2));
    var time = now.getTime() - last.time.getTime();
    if (distance * time < space * period) {    //event arrived too soon or mouse moved too little or both
        console.log("event stopped");
        if (event.stopPropagation) { // W3C/addEventListener()
            event.stopPropagation();
        } else { // Older IE.
            event.cancelBubble = true;
        };
    } else {
        console.log("event allowed: " + now.getTime());
        last.time = now;
        last.x    = event.clientX;
        last.y    = event.clientY;
    };
};

This code is functional but as I said earlier, it doesn't resolve completely the problem.

How to limit google maps api lag when panning the map with lots of markers and polylines?

1 Answers1