CODEWITHSUNDEEP
google-maps-api-3
user1472038
user1472038

Reputation: 41

Google map api v3 "dragend" event fired more than ones

Currently I have this listener events on my google maps (api v3):

google.maps.event.addListener(Map, 'center_changed', FixedMarkerInCenter);
google.maps.event.addListener(Map, 'zoom_changed', FixedMarkerInCenterZoom);
google.maps.event.addListener(Map, 'dragend', FindReverseGeocode });

The problem is that the 'dragend' event fired more than ones (at least four times) and the function 'FindReverseGeocode' happen many times. Does anyone know the problem?

Upvotes: 4

Views: 3786

Answers (2)

dsomnus
dsomnus

Reputation: 1401

True, this is rather annoying but.. don't despair just yet - you can fix it with simple JavaScript: 

map.dragInProgress = false; //adding flag to already existing map object to keep DOM clean
google.maps.event.addListener(map, 'dragend', function() {
  if(map.dragInProgress == false) { //only first shall pass
    map.dragInProgress = true;
    window.setTimeout(function() {
        console.log('Note how you will see this console message only once.');
        //cast your logic here
        map.dragInProgress = false; //reset the flag for next drag
    }, 1000);
  }
});

In short, this allows you to receive dragend event only once per second. Make sure your script doesn't die in the middle of your logic or that first will be the last drag. You can use try/catch/finally to overcome that. Enjoy!

Upvotes: 5

Jack B Nimble
Jack B Nimble

Reputation: 5087

I stand by my comment, but here is a basic map that implements center_changed (with a marker) and dragend with a geocoder.

Here in IE9, Chrome 19 and Firefox 13 the dragend event is only fired once per drag. You'll notice that center_changed is fired many times, even while the drag isn't complete. This is why I believe your FindReverseGeocode method is being called in FixedMarkerInCenter.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript"></script>
</head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">

var map;
var geocoder;

function initialize()
{
    var latlng = new google.maps.LatLng(47.6059399181561, 14.747812500000007);
    map = new google.maps.Map(document.getElementById('map'), {
      zoom:6,
      center:latlng,
      mapTypeId:google.maps.MapTypeId.HYBRID
    });

    google.maps.event.addListener(map, 'center_changed', placeMarker);
    google.maps.event.addListener(map, 'dragend', reverseLookup);

    geocoder = new google.maps.Geocoder();
}

function placeMarker()
{
    var center = map.getCenter();
    marker = new google.maps.Marker({
      map:map,
      position: center
    });
}

function reverseLookup()
{
    geocoder.geocode({'latLng': map.getCenter()}, function(results, status)
    {
      if (status == google.maps.GeocoderStatus.OK)
      {
        document.getElementById('area').value = 
        results[results.length-1].formatted_address + " " +
        map.getCenter() + "\r\n" + document.getElementById('area').value;
      }
    });
}

</script>
<body onLoad="initialize()">
<div id="map" style="width: 800px; height: 350px;"></div>
<textarea id='area' cols='80' rows='5'></textarea>
</body>
</html>

Upvotes: -1

Related Questions