Google Maps Drag Event Doesn't Capture Center Change Until Dragging Ends In Chrome Device Mode

I'm using Angular Google Maps to include a map in my web app. I am listening to the drag event which fires successfully but the center property of the map doesn't update until the

Solution 1:

A similar question about this same behavior was asked here.

And though I can't find specific mention in the API docs about the differences between full browsers and devices, the aforementioned question links to a Maps API example specific to events, which illustrates the behavior exactly as you've described.

In non-device mode, center_changed continues to fire as the map is dragged.

In device mode, it does not. Only drag and mousemove fire while the map is being dragged. I also confirmed this behavior on actual devices, both Droid and iPhone.

That being the case, I would say it's safe to assume this is an expected, albeit undocumented, behavior.

Solution 2:

If your problem was (like mine) trying to make the map reload when the user drags it on a mobile device, I have a workaround. Unfortunately, the map tiles only load when dragging ends (same as the center attribute) - which results in a pretty bad user experience.

It seems like we can't change this behavior, however I helped myself out by putting the map in a larger div within the original div, so that a larger part of the map is loaded and the user doesn't see grey tiles when dragging. Here's my css for that larger div:

#map {
  width: 300%;
  height: 300%;
  top: -100%;
  left: -100%;
}