google maps api v3 no smooth dragging

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.


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>

google maps api v3 no smooth dragging - iOS, 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� Google Maps JavaScript API V3 Reference Last updated Tuesday, August 11, 2020 This is an index of all the classes, methods, and interfaces in the Maps JavaScript API version 3.42 (weekly channel).


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;
}

Controlling Zoom and Pan | Maps JavaScript API, When a user scrolls a page that contains a map, the scrolling action can The demo below allows the page to scroll normally, without affecting� Note: The Pan control is not available in the new set of controls introduced in v3.22 of the Google Maps JavaScript API. While using v3.22 and v3.23, you can choose to use the earlier set of controls rather than the new controls, thus making the Pan control available as part of the old control set. See What's New in the v3.22 Map Controls.


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.

Draging a map triggers too much events, live, so i changed de dragend event for a drag event, but drag event That fires when the user stops interacting with the map (no panning/zooming for 300ms). You received this message because you are subscribed to the Google Groups " Google Maps JavaScript API v3" group. I got a really smooth loading effect :). Google Maps JavaScript API warning: NoApiKeys; Google Maps JavaScript API error: MissingKeyMapError; For web developers: If you have access to the source code of your application, look for the <script> tag which is used to load the Maps JavaScript API. When loading the Maps JavaScript API, substitute YOUR_API_KEY in the code below with your API


Smooth inertia map dragging, [deprecated] Google Maps JavaScript API v3. Please use the latest post. I've looked across this group, and could not find any topic related to application's map, and the API provided one, in terms of the inertia effect (when� What is the (obviously impossible) means of forcing Google Maps to *DRAG* a route rather than simply moving the entire map? I swear you just run a randomizer routine, and if it comes up with some particular set of numbers you'll be allowed to drag a route, otherwise too bad for you.


Google Maps Platform best practices: Optimization and performance , Here are our tips on how to do it with Google Maps Platform. to expect web apps that give them what they want with smooth, fast UI performance. apps that deliver mapping or other location-based features are no exception. A good best practice is to take advantage of events such as drag or dragend� Maps Embed API Maps URLs This example allows you to drag and drop either a GeoJSON file or a selection of GeoJSON text onto the map. {function(google.maps


[Google Maps API v3] Smooth inertia map dragging, Hi, I've looked across this group, and could not find any topic related to the difference between dragging the current maps.google.com� For a complete list of events, consult the Maps JavaScript API Reference.Events are listed in a separate section for each object which contains events. UI Events. Some objects within the Maps JavaScript API are designed to respond to user events such as mouse or keyboard events.