CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3google-maps-markers
Stratis Karadakis
Stratis Karadakis

Reputation: 11

google maps marker on event 'dragend' issue

So I'm trying to build a simple web app that takes the address from the user and places a marker on that address. After that, the user can drag the marker to another location and the address field should update accordingly. The problem is I cannot get the address field to update automatically on dragend. The best I have done so far is to update when you click the marker but this is a horrible user experience.

tl;dr change the code so that the "address" field gets updated on dragend and not on click.

var geocoder = new google.maps.Geocoder();
var map;
var marker;
var infowindow = new google.maps.InfoWindow({
  size: new google.maps.Size(150, 50)
});


function initialize() {
  geocoder = new google.maps.Geocoder();
  var latlng = new google.maps.LatLng(37.9839, 23.7294);
  var mapOptions = {
    zoom: 16,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }



  map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
  google.maps.event.addListener(map, 'click', function() {
    infowindow.close();
  });
}
function geocodePosition(pos) {
  geocoder.geocode({
    latLng: pos
  }, function(responses) {
    if (responses && responses.length > 0) {
      marker.formatted_address = responses[0].formatted_address;
    } else {
      marker.formatted_address = 'Cannot determine address at this location.';
    }
    infowindow.setContent("<b>" + marker.formatted_address + "</b>" + "<br> Drag the marker and click on it to update the address field!");
    infowindow.open(map, marker);
  });
}

function codeAddress() {
  var address = document.getElementById('address').value;
  geocoder.geocode({
    'address': address
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
      if (marker) {
        marker.setMap(null);
        if (infowindow) infowindow.close();
      }
      marker = new google.maps.Marker({
        map: map,
        draggable: true,
        position: results[0].geometry.location
      });
      google.maps.event.addListener(marker, 'dragend', function() {
        geocodePosition(marker.getPosition());

      });
      google.maps.event.addListener(marker, 'click', function() {
        newAddress = marker.formatted_address; 
        document.getElementById("address").value = newAddress;
        if (marker.formatted_address) {
          infowindow.setContent("<b>" + marker.formatted_address + "</b>" + "<br> Drag the marker and click on it to update the address field!");

        } else {
          infowindow.setContent("<b>" + address + "</b>" + "<br> Drag the marker and click on it to update the address field!");
        }
        infowindow.open(map, marker);      
      });
      google.maps.event.trigger(marker, 'click');

    } 
else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}

google.maps.event.addDomListener(window, "load", initialize);

Upvotes: 0

Views: 969

Answers (1)

Dr.Molle
Dr.Molle

Reputation: 117314

geocoding runs asynchronously, you must update the input when the response arrives, not immediately.

Possible approach to achieve it:

change

  google.maps.event.addListener(marker, 'dragend', function() {
    geocodePosition(marker.getPosition());

  });

...to

  google.maps.event.addListener(marker, 'dragend', function() {
    var that=this;
    geocodePosition(that.getPosition(),
                    function(){
                      google.maps.event.trigger(that, 'click');
                    });

  });

now you have a callback-function which may be executed when the response arrives.

To call it change

function geocodePosition(pos) {
  geocoder.geocode({
    latLng: pos
  }, function(responses) {
    if (responses && responses.length > 0) {
      marker.formatted_address = responses[0].formatted_address;
    } else {
      marker.formatted_address = 'Cannot determine address at this location.';
    }
    infowindow.setContent("<b>" + marker.formatted_address + "</b>" + "<br> Drag the marker and click on it to update the address field!");
    infowindow.open(map, marker);
  });
}

...to

function geocodePosition(pos,callback) {
  geocoder.geocode({
    latLng: pos
  }, function(responses) {
    if (responses && responses.length > 0) {
      marker.formatted_address = responses[0].formatted_address;
    } else {
      marker.formatted_address = 'Cannot determine address at this location.';
    }
    infowindow.setContent("<b>" + marker.formatted_address + "</b>" + "<br> Drag the marker to update the address field!");
    callback();//<--this will trigger the marker-click
    infowindow.open(map, marker);
  });
}

Upvotes: 1

Related Questions