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


my question:
how make google maps move smother when there lot of markers , polylines shown on map?

i asking advices on application developed.

the issue happens in firefox when map moved up,down,left or right mouse.

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

all data located inside 7 kml files.

all polylines segments of direction b have lots of points. think of problem caused size , number of polylines.

similar thread :
- need guidance on google map application has 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 similar problem else, don't think alone in situation.
https://code.google.com/p/gmaps-api-issues/issues/detail?id=5665

i tried solution improved movement not resolve issue.
google maps api v3 no smooth dragging
http://jsfiddle.net/cx4gn/3/

var last = {time : new date(),    // last time let event pass.             x    : -100,          // last x position af event passed.             y    : -100};         // last y position af event passed. var period = 100; // ms - don't let pass more 1 event every 100ms. var space  = 40;   // px - let event pass if distance between last ,                   //      current position greater 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 throttle events.     // "true" means capture event , event     // before google maps gets it. if cancel event,     // google maps never receive it.     map_div.addeventlistener("mousemove", throttle_events, true); };  function throttle_events(event) {     var = 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 or mouse moved 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 functional said earlier, doesn't resolve problem.

other solutions welcomed.

[edit 2014-03-14] best solution found , tested in production, , working pretty well.


Comments

Popular posts from this blog

Android layout hidden on keyboard show -

google app engine - 403 Forbidden POST - Flask WTForms -

c - Why would PK11_GenerateRandom() return an error -8023? -