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

Answer 1

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.

Other solutions will be welcomed.

[EDIT 2014-03-14] It is finally the best solution I found and I tested it in production, and it is finally working pretty well.