In a earlier article we have gone through how to draw directions between two locations. In this article we will learn how to make directions draggable using Google Maps v3.
Make directions draggable
Google Maps v3 allows the directions to be draggable by setting draggable property of the renderer to true. This allows user to modify cycling, walking or driving directions displayed using a DirectionsRenderer dynamically, permitting a user to select and alter routes by clicking and dragging the resulting paths on the map. Transit directions cannot be made draggable.
The following is example showing the implementation of draggable markers
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&key=AIzaSyD0X4v7eqMFcWCR-VZAJwEMfb47id9IZao">
</script>
<style>
body {
color: black;
font-family: arial,sans-serif;
font-size: 13px;
}
</style>
<script type="text/javascript">
var map;
var rendererOptions = {draggable: true};
var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
var directionsService = new google.maps.DirectionsService();
$(document).ready(function () {
//draw a map centered at Empire State Building Newyork
var latlng = new google.maps.LatLng(40.748492, -73.985496);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("divDirections"));
$("#btnGetDirections").click(function(){
calcRoute($("#txtAddress1").val(),$("#txtAddress2").val());
});
});
function calcRoute(start,end) {
var request = {
origin:start,
destination:end,
travelMode: google.maps.TravelMode.DRIVING,
provideRouteAlternatives : false
};
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});
}
</script>
</head>
<body>
<div id="container" class="shadow">
<div id="map_canvas"></div>
<div id="sidebar">
<div class="row" style="background:#E3EDFA">
<label> Enter Address</label>
<input type="text" id="txtAddress1" class="text" value="350 5th Ave, New York, NY" />
<input type="text" id="txtAddress2" class="text" value="1 Brewster Road, Newark, NJ" />
<img src="images/search.png" id="btnGetDirections" border="0" width="24" height="24" style="vertical-align:middle;" />
</div>
<div class="separator"></div>
<div id="divDirections">
</div>
</div>
</div>
</body>
</html>
Here is the output of the code above
Image may be NSFW.
Clik here to view.
Because draggable directions are modified and rendered client-side, you may wish to monitor and handle the directions_changed event on the DirectionsRenderer to be notified when the user has modified the displayed directions. Given below is sample code for implementation
$(document).ready(function () {
google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
computeTotalDistance(directionsDisplay.directions);
});
});
function computeTotalDistance(result) {
var total = 0;
var myroute = result.routes[0];
for (i = 0; i < myroute.legs.length; i++) {
total += myroute.legs[i].distance.value;
}
total = total / 1000.
//display total anywhere or do anything with it..
//$("#....").html(total);
}
To view the demo please click here
Image may be NSFW.
Clik here to view.
To download complete set of google maps examples, click here
Image may be NSFW.
Clik here to view.
NOTE : Please change the key if you using the code from the demo.
The post Make directions draggable using Google Maps v3 appeared first on Everything Technical.