title: Calculate distance and move marker from origin place in google map
body: <p>Hi i have create a web application in which i can show distance between two place on map using google V3 api and in other web application i have created animation drop marker which i can move on the map how can i combine these two. here is my code:</p>
  
  <pre><code>&lt;%@ Page Language="C#" AutoEventWireup="true" CodeFile="Direction2.aspx.cs" Inherits="Direction2" %&gt;  
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;  
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;  
  &lt;head runat="server"&gt;  
       &lt;title&gt;&lt;/title&gt;  
      &lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"&gt;&lt;/script&gt;
       &lt;script type="text/javascript"&gt;
          var directionDisplay;
          var directionsService = new google.maps.DirectionsService();
          function initialize() {
               var latlng = new google.maps.LatLng(51.764696, 5.526042);
               directionsDisplay = new google.maps.DirectionsRenderer();
               var myOptions = {
                   zoom: 14,
                   center: latlng,
                   mapTypeId: google.maps.MapTypeId.ROADMAP,
                   mapTypeControl: false
              };
               var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
              directionsDisplay.setMap(map);
              directionsDisplay.setPanel(document.getElementById("directionsPanel"));
              var marker = new google.maps.Marker({
                  position: latlng,
                  map: map,
                  title: "My location"
               });
          }
          function calcRoute() {
              var start = document.getElementById("routeStart").value;
              var end = "51.764696,5.526042";
              var request = {
                  origin: start,
                  destination: end,
                  travelMode: google.maps.DirectionsTravelMode.DRIVING
              };
               directionsService.route(request, function (response, status) {
                  if (status == google.maps.DirectionsStatus.OK) {
                      directionsDisplay.setDirections(response);
                  }
              });
          }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body onload="initialize()"&gt;
  
      &lt;div id="map_canvas" style="width:710px; height:300px"&gt;&lt;/div&gt;  
      &lt;form action="" onsubmit="calcRoute();return false;" id="routeForm"&gt;
          &lt;input type="text" id="routeStart" value=""/&gt;
          &lt;input type="submit" value="Route plannen"/&gt;
  
  &lt;div id="directionsPanel"&gt;&lt;/div&gt;
      &lt;/form&gt;
   &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And for animation i use this code:
      &lt;%@ Page Language="C#" AutoEventWireup="true" CodeFile="Drop.aspx.cs" Inherits="Drop" %></p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head runat="server"&gt;
  &lt;title&gt;Drop&lt;/title&gt;
  &lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"&gt;&lt;/script&gt;
  
          &lt;script type="text/javascript"&gt;
              var stockholm = new google.maps.LatLng(59.32522, 18.07002);
              var parliament = new google.maps.LatLng(59.327383, 18.06747);
              var marker;
              var map;
  
               function initialize() {
                  var mapOptions = {
                      zoom: 13,
                      mapTypeId: google.maps.MapTypeId.ROADMAP,
                      center: stockholm
                  };
  
                   map = new google.maps.Map(document.getElementById("map_canvas"),
        mapOptions);
  
                  marker = new google.maps.Marker({
                      map: map,
                      draggable: true,
                      animation: google.maps.Animation.DROP,
                      position: parliament
                  });
                   google.maps.event.addListener(marker, 'click', toggleBounce);
          }
  
               function toggleBounce() {
  
                   if (marker.getAnimation() != null) {
                       marker.setAnimation(null);
                   } else {
                       marker.setAnimation(google.maps.Animation.BOUNCE);
                  }
              }
  &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body onload="initialize()" onunload="Gunload()"&gt;
      &lt;form id="form1" runat="server"&gt;
       &lt;div id="map_canvas" style="width:525px; height:237px;"&gt;
     &lt;/div&gt;
   &lt;/form&gt;
  </code></pre>
  
  <p>
    
   thanks in advance</p>