google maps api v3 no smooth dragging

Question

I started implementing my software using maps api v3. Unfortunatelly i found out that v3 API has some serious issues which draws me back from bying a bussiness licence.

My clients use monitors with HD resolution which is 1920x1080 and the map takes 90% of the screen space. Unfortunatelly here comes the problem i am talking about. When i click with the mouse on the map and start dragging it it is not smootly and it is really annoying. All the fun goes away.

I tried some different scenarious using windows XP, windows 7 and Windows 8. The browsers i am working with are the latest versions of Firefox, Chrome and IE. Here are the results when i try to drag the map:

1. Small screen resolution 320x240: Firefox, Chrome and IE handle it very well. It is impossible to notice that the dragging is not smooth.
2. Small screen resolution 320x240 with 10 polylines on the map: Chrome and IE handle it kind of well but if you have experience with v2 API you will notice a difference. Firefox - nightmare, dragging is not smooth at all.
3. Medium screen resolution 1024x768. Firefox - there is some incosistent lagging. Chrome and IE - kind of smooth dragging but if you move the mouse fast things get worse.
4. Medium screen resolution 1024x768 with 10 polylines on the map. Firefox - nightmare. Chrome and IE - you start to notice that there is some delay but at the same time it looks kind of smooth.
5. High screen resolution 1920x1080. Firefox - huge lagging. Chrome and IE - a little better but still there is a noticeble lagging. 6) High screen resolution 1920x1080 with polylines on the map: Firefox, Chrome ad IE - NIGHTMARE. It is almost impossible to drag the map.

Interesting facts:

1. The problem described above does not exists with v2 API of google maps.
2. The problem described above does not exists when the mouse is moved less than 50-60 pixels per second. Dragging is really smooth. When the mouse is beeing moved fast the lagging appears.
3. On http://maps.google.com the problem does not exists at all BUT when i open some of the code samples on developers guide the problem is there. Here is an example: https://google-developers.appspot.com/maps/documentation/javascript/examples/full/circle-simple.

I think that i described the problem as deep as possible and no matter how hard i tried to bypass it i could not find any solution.

I will be glad if somebody shares their opinion on this problem.

P.S. Unfortunatelly i do not have a key for v2 so i can not create an example where you can view the map outside my localhost but i found a web site where there is a side by side comparison (v2 and v3). Try dragging the maps to see the VERY difference.

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

The resolution of the maps is very small and most probably unexperienced users may not see the difference so i will give you also the seperate links to the maps and you just have to use firebug or a similar debuger to make the canvas resolution bigger. Then you will see what i am talking about.

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

Answer 1

We had issue that we had CSS3 transition added to all elements..

So remove transition and its worked fine..

See example:

#map * {
  -moz-transition: none;
  -webkit-transition: none;
  -o-transition: all 0s ease;
  transition: none;
}