CODEWITHSUNDEEP
javascriptjquery
Reverse Hack
Reverse Hack

Reputation: 31

jQuery GeoComplete - get Location when marker is dragged

Using http://ubilabs.github.com/geocomplete/examples/draggable.html as an example.

jQuery("#geocomplete").bind("geocode:dragged", function(event, latLng){
        jQuery("input[name=lat]").val(latLng.lat());
        jQuery("input[name=lng]").val(latLng.lng());            
    });

I am able to get the marker position in form of lat lng after the marker is dragged. But I am not able to get current location of the marker after being dragged.

I want to update my location text box on the current position of marker after being dragged.

Upvotes: 3

Views: 5751

Answers (3)

David Smit
David Smit

Reputation: 839

I am not sure if this is the same issue, but my 'find' also returned the incorrect result when doing more then one 'find'. It seems it is because the 'bounds' are set on subsequent finds, and the wrong results are return.

As a workaround, I changed the "jquery.geocomplete.js" file as follow, by adding this line:

request.bounds = this.options.bounds;

just before this line (352): 

this.geocoder.geocode(request, $.proxy(this.handleGeocode, this));

then the find should work as per normal:

$("#geocomplete").geocomplete("find", latLng.toString());

Upvotes: 0

adam Kearsley
adam Kearsley

Reputation: 999

I managed to find a better work around!

The work around you that Nadeeshani posted isn't very precise and it centres the map to a nearest address.

I managed to fix this by using the google geocoded, test the following code.

var options = {
  map: "#mapnew",
  country: 'uk',
  mapOptions: {
    streetViewControl: false,
    mapTypeId : google.maps.MapTypeId.HYBRID
  },
  markerOptions: {
    draggable: true
  }
};

$("#address").geocomplete(options).bind("geocode:result", function(event, result){
  $('#logs').html(result.formatted_address);
  var map = $("#address").geocomplete("map");
  map.setZoom(18);
  map.setCenter(result.geometry.location);
});

$("#address").bind("geocode:dragged", function(event, latLng){
  console.log('Dragged Lat: '+latLng.lat());
  console.log('Dragged Lng: '+latLng.lng());
  var map = $("#address").geocomplete("map");
  map.panTo(latLng);
  var geocoder = new google.maps.Geocoder();

  geocoder.geocode({'latLng': latLng }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      if (results[0]) {
        var road = results[0].address_components[1].long_name;
        var town = results[0].address_components[2].long_name;
        var county = results[0].address_components[3].long_name;
        var country = results[0].address_components[4].long_name;
        $('#logs').html(road+' '+town+' '+county+' '+country);
      }
    }
  });
});

See my JSFiddle Example

Upvotes: 6

Nadeeshani
Nadeeshani

Reputation: 493

This may not be a 100% perfect solution, but I too had the same issue and this is how I got through it. This is kind of a workaround.

$("#geocomplete").bind("geocode:dragged", function(event, latLng){          
$("input[name=lat]").val(latLng.lat());
$("input[name=lng]").val(latLng.lng()); 
$("#geocomplete").geocomplete("find", latLng.toString());
});

The only problem here is the map is setting to its default zomm size since the autocomplete is sort of re initializing here.

Hope this will help

Upvotes: 1

Related Questions