google maps api v3 no smooth dragging - google-maps-api-3

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:
Small screen resolution 320x240: Firefox, Chrome and IE handle it very well. It is impossible to notice that the dragging is not smooth.
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.
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.
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.
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:
The problem described above does not exists with v2 API of google maps.
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.
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;
}

Answer 2

Same here. What I noticed is that v3 fires a lot of events while panning the map and the browser tends to choke (FF especially). I say this because I also used Bing Maps API and the number of events per second for viewchange (equivalent for center_changed in Google) is much smaller. Also they provide the method addThrottledHandler() with which you can reduce the number of events generated.
From what I can tell, Google Maps seem to fire one center_changed event for each mousemove event and before the map's view is updated. So you get a lot of events generated but none of them are replicated on the screen; browser chokes on map view updates or it might be that the map waits until there are no more changes and only then it updates the view.
Edit: if we prevent some of the mousemove events to reach Google Maps then the browser will not choke on mousemove events plus all the other events that Google Maps generates from this event, like center_changed, and the map will pan smoothly.
To do this we add an event listener to the #map div (we can add it to body tag also). We add the event for the capture phase. When mouse moves on the screen, first the body tag receives the event then our #map div and then Google Maps elements (divs, tiles). This is the capture phase. After that follows the bubble phase in which the event goes back from Google Maps elements to our #map div and then to the body tag. Usually event handlers are registered for the bubbling phase so if we register a handler for the capture phase we can cancel the event and so there will be no bubbling phase for this event. This also means that Google Maps will not receive the event.
You can increase the period and space parameters to kill more events. Killing too many events means that the map will start to jump from one position to the next. Killing too few means that all events will reach Google Maps and the browser will choke on newly generated events from Google Maps and so the map will jump from one position to the next. Some middle ground works best.
Now after all these, Google Maps will not be as smooth as Bing Maps. This is because Bing Maps use inertia: when you move the map violently, the map will start slowly to follow the mouse and then faster and faster. This creates a very smooth pan indeed.
An interesting fact that I've found is that Google Chrome and Opera/Chrommium will generate about one mousemove event per second even if the mouse doesn't move! This code will kill those events too (because distance is zero for those events).
http://jsfiddle.net/uNm57/ (check js console in Firefox; you should see some events that are stopped and then one 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 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 = 2; // 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;
};
};
</script>
</head>
<body onload = "init_map()">
<div id="map"></div>
</body>
</html>

Answer 3

I was facing this issue in only mobile browsers. The drag/pan was smooth in desktop browsers but when it came to mobile there was lag when user dragged the map. I spent like 3 hours on this and finally realized that a missing meta tag was the reason.
Basically if you do not include this meta tag
<meta name="viewport" content="width=device-width, initial-scale=1">
the problem comes. I feel incredibly stupid for realizing this after 3 hours or not adding the meta tag in the first place. But anyways if someone else is also making this mistake I hope I saved some of your time.

Answer 4

I faced the same problem and lost my days to solve, finally I figured out how this can be solved simply.
#Arturs Smirnovs's answer was very helpful.
In my case, there was a transition in css, by that google map was not working smoothly, I added the css to disable the transition into the map, so that the map worked very expectedly.
Hope this can help anyone.
.google-map * {
transition: none !important;
}