• Make directions draggable using Google Maps v3

    Posted on October 23, 2012 by in Javascript, Other Programming

    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

    GoogleMaps - Draggable Directions

    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

    To download complete set of google maps examples, click here

    NOTE : Please change the key if you using the code from the demo.

    Be Sociable, Share!

    Written by

    Vanamali Juvvadi is a Web enthusiast and loves all things design and technology. Founded qnownow with a group of friends to share anything/everything they know/find on the internet.

    View all articles by

    Email : [email protected]

    Leave a Reply