javascript - determine google map drag direction

Question

I need to determine whether a google map is being dragged from East-to-West or West-to-East. Google search throws up loads of driving directions search results as soon as I enter a combination of map and direction but nothing relevant to the drag keyword. Though there might be some relevant results out there which haven't met my eye.

Currently I do it by comparing longitude of current center and the new center in center_changed event -

google.maps.event.addListener(map, 'center_changed', function() {

    var newCenter = map.getCenter();
    var markerIcon;
    if (newCenter.lng() > currentLongitude) {
        markerIcon = goingEast;
    } else {
        markerIcon = goingWest;
    }

    var marker = new google.maps.Marker({
        position: map.getCenter(),
        map: map,
        icon: markerIcon
    });
});

I wonder if that's the correct way to do it or perhaps there is a property/method etc. that tells me directly what I need to know.

Answer 1

There is no built-in method or property. Your method also may not give the desired result as soon as you cross the international date line.

Imagine you fly from London via New York to Tokio. You would say you fly to western direction, but your approach would say you fly to eastern direction, because the Longitude of London is 0 and the Longitude of Tokio 140. The same will happen when you drag the map.

Use the mouseEvents of the map-div instead:

        mapOptions);
        google.maps.event.addListener(map, 'dragstart', function(){
          google.maps.event.addDomListenerOnce(map.getDiv(),
                                               'mousemove',
                                               function(e){map.set('x',e.clientX);})
        });
        google.maps.event.addListener(map, 'dragend', function(){
          google.maps.event.addDomListenerOnce(map.getDiv(),
                                               'mouseup',
                                               function(e){alert((e.clientX<map.get('x'))
                                                                   ?'left':'right');})
        });