How can I find the values of draggable location

var source, destination;

var directionsDisplay;

var directionsService = new google.maps.DirectionsService();

google.maps.event.addDomListener(window, 'load', function () {

var input = document.getElementById('txtSource');

var input1 = document.getElementById('txtDestination');

// var autocomplete = new google.maps.places.Autocomplete(input);

//var autocomplete1 = new google.maps.places.Autocomplete(input1);

new google.maps.places.SearchBox(document.getElementById('txtSource'));

new google.maps.places.SearchBox(document.getElementById('txtDestination'));

directionsDisplay = new google.maps.DirectionsRenderer({ 'draggable': true });

});

window.onload = function () {

GetRoute();

}

function GetRoute() {

var Tuticorin = new google.maps.LatLng(8.7948098,78.1190259);

var mapOptions = {

zoom: 12,

center: Tuticorin

};

map = new google.maps.Map(document.getElementById('dvMap'), mapOptions);

directionsDisplay.setMap(map);

directionsDisplay.setPanel(document.getElementById('dvPanel'));

//*********DIRECTIONS AND ROUTE**********************//

source = document.getElementById("txtSource").value;

destination = document.getElementById("txtDestination").value;

var request = {

origin: source,

destination: destination,

travelMode: google.maps.TravelMode.DRIVING

};

directionsService.route(request, function (response, status) {

if (status == google.maps.DirectionsStatus.OK) {

directionsDisplay.setDirections(response);

}

});

var m1 = document.getElementById("map-cir1");

var m2 = document.getElementById("map-cir2");

if (source=="" && destination=="") {

m1.style.display = "none";

m2.style.display = "block";

} else {

m1.style.display = "block";

m2.style.display = "none";

}

//*********DISTANCE AND DURATION**********************//

var service = new google.maps.DistanceMatrixService();

service.getDistanceMatrix({

origins: [source],

destinations: [destination],

travelMode: google.maps.TravelMode.DRIVING,

unitSystem: google.maps.UnitSystem.METRIC,

avoidHighways: false,

avoidTolls: false

}, function (response, status) {

if (status == google.maps.DistanceMatrixStatus.OK && response.rows[0].elements[0].status != "ZERO_RESULTS")

{

var x1 = response.rows[0].elements[0].distance.value;

var x2 = response.rows[0].elements[0].duration.text;

var locationnew = document.getElementById("locationnew");

var dvDistance = document.getElementById("dvDistance");

var dvDuration = document.getElementById("dvDuration");

var source = document.getElementById("txtSource");

var destination = document.getElementById("txtDestination");

4 Replies

Know the answer? Post it — somebody with the same question will find it here.

Suraj Kumar7y ago
Accepted answer
Please check the below thread and forum post-

https://gis.stackexchange.com/questions/33238/getting-coordinates-from-click-or-drag-event-in-google-maps-api
karthika pommudu7y ago
Thanks a lot Mr.Vaibhav.. :)

Its very useful and I want the "dvpanel"- draggable distance and duration values seperately kindly help this
karthika pommudu7y ago
thank you Mr.Suraj

Is there any solution for the code in javascript forDraggable?
Vaibhav Kapoor7y ago
You can use the drag event:

$('#dragThis').draggable(
{
drag: function()
{
var offset = $(this).offset();
var xPos = offset.left;
var yPos = offset.top;
$('#posX').text('x: ' + xPos);
$('#posY').text('y: ' + yPos);
}
}
);

You can follow stackoverflow.com for more information