lag - google maps api v3 no smooth dragging -

i started implementing software using maps api v3. unfortunatelly found out v3 api has serious issues draws me bying bussiness licence.

my clients use monitors hd resolution 1920x1080 , map takes 90% of screen space. unfortunatelly here comes problem talking about. when click mouse on map , start dragging it not smootly , annoying. fun goes away.

i tried different scenarious using windows xp, windows 7 , windows 8. browsers working latest versions of firefox, chrome , ie. here results when try drag map:

1. small screen resolution 320x240: firefox, chrome , ie handle well. impossible notice dragging not smooth.
2. small screen resolution 320x240 10 polylines on map: chrome , ie handle kind of if have experience v2 api notice difference. firefox - nightmare, dragging not smooth @ all.
3. medium screen resolution 1024x768. firefox - there incosistent lagging. chrome , ie - kind of smooth dragging if move mouse fast things worse.
4. medium screen resolution 1024x768 10 polylines on map. firefox - nightmare. chrome , ie - start notice there delay @ same time looks kind of smooth.
5. high screen resolution 1920x1080. firefox - huge lagging. chrome , ie - little better still there noticeble lagging. 6) high screen resolution 1920x1080 polylines on map: firefox, chrome ad ie - nightmare. impossible drag map.

interesting facts:

1. the problem described above not exists v2 api of google maps.
2. the problem described above not exists when mouse moved less 50-60 pixels per second. dragging smooth. when mouse beeing moved fast lagging appears.
3. on http://maps.google.com problem not exists @ when open of code samples on developers guide problem there. here example: https://google-developers.appspot.com/maps/documentation/javascript/examples/full/circle-simple.

i think described problem deep possible , no matter how hard tried bypass not find solution.

i glad if shares opinion on problem.

p.s. unfortunatelly not have key v2 can not create example can view map outside localhost found web site there side side comparison (v2 , v3). try dragging maps see difference.

http://www.wolfpil.de/v2-v3-sidebyside.html

the resolution of maps small , unexperienced users may not see difference give seperate links maps , have use firebug or similar debuger make canvas resolution bigger. see talking about.

• map v2: http://www.wolfpil.de/v2.html
• map v3: http://www.wolfpil.de/v3.html

same here. noticed v3 fires lot of events while panning map , browser tends choke (ff especially). because used bing maps api , number of events per second viewchange (equivalent center_changed in google) smaller. provide method addthrottledhandler() can reduce number of events generated.

from can tell, google maps seem fire 1 center_changed event each mousemove event , before map's view updated. lot of events generated none of them replicated on screen; browser chokes on map view updates or might map waits until there no more changes , updates view.

edit: if prevent of mousemove events reach google maps browser not choke on mousemove events plus other events google maps generates event, center_changed, , map pan smoothly.

to add event listener #map div (we can add body tag also). add event capture phase. when mouse moves on screen, first body tag receives event our #map div , google maps elements (divs, tiles). capture phase. after follows bubble phase in event goes google maps elements our #map div , body tag. event handlers registered bubbling phase if register handler capture phase can cancel event , there no bubbling phase event. means google maps not receive event.

you can increase period , space parameters kill more events. killing many events means map start jump 1 position next. killing few means events reach google maps , browser choke on newly generated events google maps , map jump 1 position next. middle ground works best.

now after these, google maps not smooth bing maps. because bing maps use inertia: when move map violently, map start follow mouse , faster , faster. creates smooth pan indeed.

an interesting fact i've found google chrome , opera/chrommium generate 1 mousemove event per second if mouse doesn't move! code kill events (because distance 0 events).

http://jsfiddle.net/unm57/ (check js console in firefox; should see events stopped , 1 allowed event)

<html>   <head>     <style type='text/css'>       #map {           position: absolute;           width: 100%;           height: 100%;           margin: 20px;       }     </style>      <script type='text/javascript'>       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  = 2;   // 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;           };       };     </script> </head> <body onload = "init_map()">     <div id="map"></div> </body> </html>