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

  /*function initialize() {
    directionsDisplay = new google.maps.DirectionsRenderer();
    var London = new google.maps.LatLng(51.501957, -0.124540);
    var myOptions = {
      zoom:14,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: London
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById("directionsPanel"));
  }*/
  
  function calcRoute() {

	  
	  document.getElementById('merchantmap').innerHTML=""; 
	  
	  clearDiv();
	  
    var toaddress = document.getElementById("start").value;
	var fromaddress = document.getElementById("end").value;
	//alert(toaddress);
	//alert(fromaddress);
	
	
	 var directionsService = new google.maps.DirectionsService();
	   var directionsDisplay = new google.maps.DirectionsRenderer();

	   var myOptions = {
	     zoom:7,
	     mapTypeId: google.maps.MapTypeId.ROADMAP
	   }

	   var map = new google.maps.Map(document.getElementById("merchantmap"), myOptions);
	   directionsDisplay.setMap(map);
	   directionsDisplay.setPanel(document.getElementById("directionsPanel"));

	   var request = {
			   
	       origin: toaddress,
	       destination: fromaddress,
	       travelMode: google.maps.DirectionsTravelMode.DRIVING
	   };
	  //alert(request);

	   directionsService.route(request, function(response, status) {
	      if (status == google.maps.DirectionsStatus.OK) {

	    	  
	    	//alert("hi");
	        //Display the distance:
	         document.getElementById('distance').innerHTML += 
	            response.routes[0].legs[0].distance.value + " meters";

	         // Display the duration:
	        document.getElementById('duration').innerHTML += 
	           response.routes[0].legs[0].duration.value + " seconds";

	         directionsDisplay.setDirections(response);
	      }
	   });
	   /*var mydiv = document.getElementById("merchantmap");
	   var curr_width = parseInt(mydiv.style.width); // removes the "px" at the end
	    mydiv.style.width = (curr_width - 210) +"px";
	   
	    var curr_height = parseInt(mydiv.style.height); // removes the "px" at the end
	    mydiv.style.height = (curr_height - 82) +"px"; 
	    */
	   
	   document.getElementById('merchantmap').style.height = '420px';
	   document.getElementById('merchantmap').style.width  = '690px';
	   document.getElementById('merchantmap').style.display="block";
	   //document.getElementById('merchantmap').style.display="none";
	 //  document.getElementById('map-viewdir').style.display="block";
	   document.getElementById('directionsPanel').style.display="block";
	
	   
  }
  
  function clearDiv()
  {
	  document.getElementById("directionsPanel").innerHTML="";
  }