0

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 dragging stops. Is this the expected behavior? I couldn't find any docs to confirm.

$scope.map = {
    center: $scope.currentCoords,
    control: {},
    zoom: 15,
    events: {drag: function(m, e, args){mapDragged(m, e, args)}}
};

var mapDragged = function(map, eventName, args){
    console.log($scope.map.center); // this value only changes when dragging stops and restarts
}

UPDATE

I tried to use the native google maps events in this example that seem to capture the change in the center of the map but this still doesn't work. The 'center_changed' event only fires after the drag stops and not like in the example 

google.maps.event.addListener($scope.map.control.getGMap(), 'center_changed',function() {
    console.log($scope.map.control.getGMap().getCenter().toUrlValue());
});

UPDATE 2

It looks like everything works fine when I have the chrome developer tools NOT SET to a DEVICE MODE. The intended usage is on mobile so need to find a way to make this work...

rex
  • 3,133
  • 6
  • 35
  • 62
  • i have tested mapp on fiddle http://jsfiddle.net/w2wcbk84/ maybe somehow `drag` event sops `center_changed` – whd Mar 14 '16 at 09:16
  • Please see my second update. It seems the problem is with touch events on Chrome Dev Tools. – rex Mar 14 '16 at 09:18
  • Honestly, I would just avoid trying to use Chrome Dev Tools as an absolutely perfect test of mobile. I have found sometimes very simple parts of layout, the feel of how the Javascript runs, etc, is not well represented in Dev Tools. It's a good general picture, but not good for specifics IMO. – tempranova Mar 14 '16 at 19:44

2 Answers2

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.

Community
  • 1
  • 1
cokeman19
  • 2,405
  • 1
  • 25
  • 40
  • In device mode drag fires but the centre of the map doesn't change while dragging – rex Mar 17 '16 at 06:19
  • I think the problem is with the touch events. Perhaps there is a way to get around this by simulating mouse click events? – rex Mar 17 '16 at 06:22
  • There's almost certainly a way around it, but what you're in for is reverse engineering the Maps' JS to figure out which event to trigger, when to trigger it, and what you're interfering with when you do. For example, I took a quick swing at this by calling the `fitBounds()` method (which internally updates the map center) during the `drag` event. It successfully updated the center on the (not correctly), but it interfered with the ongoing drag operation and zoomed out also. – cokeman19 Mar 17 '16 at 17:23
0

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%;
}
Lukas Stäcker
  • 319
  • 3
  • 10