title: Google Maps distance calculator WITH geolocation
body: <p>I have a small web app that can calculate the distance between two points on Google maps. </p>
  
  <p>I would like it to place the user at it's current position when loading the app. I have tried with different geolocation methods without any luck. </p>
  
  <p>The best thing would be to have it calculate the distance from the users position. However, just having the users position in the web-app will be enough for me. </p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
      &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no"/&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 map;
  
  
  function initialize() {
      directionsDisplay = new google.maps.DirectionsRenderer();
      var copenhagen = new google.maps.LatLng(55.6771, 12.5704);
      var myOptions = {
          zoom:12,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          center: copenhagen
      }
  
      map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
      directionsDisplay.setMap(map);
      }
  
  
      var directionsService = new google.maps.DirectionsService();
  
      function calcRoute() {
      var start = document.getElementById("start").value;
      var end = document.getElementById("end").value;
      var distanceInput = document.getElementById("distance");
  
      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);
              distanceInput.value = response.routes[0].legs[0].distance.value / 1000;
          }
      });
      }
      &lt;/script&gt;
  
      &lt;title&gt;Distance Calculator&lt;/title&gt;
  
      &lt;style type="text/css"&gt;
  
              body {
                  font-family:Helvetica, Arial;
              }
              #map_canvas {
                  height: 50%;
              }
      &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
  
      &lt;body onload="initialize()"&gt;
      &lt;p&gt;Enter your current location and desired destination to get the distance&lt;/p&gt;
          &lt;div&gt;
              &lt;p&gt;
                  &lt;label for="start"&gt;Start: &lt;/label&gt;
                  &lt;input type="text" name="start" id="start" /&gt;
  
                  &lt;label for="end"&gt;End: &lt;/label&gt;
                  &lt;input type="text" name="end" id="end" /&gt;
  
                  &lt;input type="submit" value="Calculate Route" onclick="calcRoute()" /&gt;
              &lt;/p&gt;
              &lt;p&gt;
                  &lt;label for="distance"&gt;Distance (km): &lt;/label&gt;
                  &lt;input type="text" name="distance" id="distance" readonly="true" /&gt;
              &lt;/p&gt;
          &lt;/div&gt;
          &lt;div id="map_canvas"&gt;&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>