title: How to navigate using google map from user's location to a fixed point on HTML5 webpage?
body: <p>I am new to geolocation and I tried a lot of times to get my website to locate user's location, but still I don't know how to navigate from user's position to a fixed point on Google map, I am using the codes below:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt; 
  &lt;html&gt; 
      &lt;head&gt; 
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Google Maps&lt;/title&gt; 
      &lt;link rel="stylesheet" href="css/pink.min.css" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile.structure-1.1.1.min.css" /&gt;
  
      &lt;style&gt;
          #map-page, #map-canvas { width: 100%; height: 300px; padding: 0; }
      &lt;/style&gt;
      &lt;script src="http://code.jquery.com/jquery-1.6.4.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="../JQuery Mobile 程式碼/ch9/maps.js"&gt;&lt;/script&gt;
      &lt;script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://maps.google.com.tw/maps/api/js?sensor=false"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
  
  $( "#map-page" ).live( "pageinit", function() {
  
      var defaultLatLng = new google.maps.LatLng(22.983587,120.22599);  // Default to Hollywood, CA when no geolocation support
  
      if ( navigator.geolocation ) {
          function success(pos) {
  
              // Location found, show map with these coordinates
              drawMap(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
          }
  
          function fail(error) {
              console.log(error);
              drawMap(defaultLatLng);  // Failed to find location, show default map
          }
  
          // Find the users current position.  Cache the location for 5 minutes, timeout after 6 seconds
          navigator.geolocation.getCurrentPosition(success, fail, {maximumAge: 500000, enableHighAccuracy:true, timeout: 6000});
      } else {
          drawMap(defaultLatLng);  // No geolocation support, show default map    
      }
  
      function drawMap(latlng) {
          var myOptions = {
              zoom: 10,
              center: latlng,
              mapTypeId: google.maps.MapTypeId.ROADMAP
  
          };
  
          var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
  
          // Add an overlay to the map of current lat/lng
          var marker = new google.maps.Marker({
              position: latlng,
              map: map,
              title: "Greetings!"
          });
      }
  
      //設置起點  
  function setstart(){  
  
      var latitude = pos.coords.latitude;
      var longitude = pos.coords.longitude;
      var title="Your Location";
      //地图中心坐标
      var latlng = new google.maps.LatLng(latitude,longitude);    
  
      if(!startpoint){  
  
      startpoint = new google.maps.Marker({  
  
          map:myMap,  
  
          position:latlng,  
  
          draggable: true  
  
      });}  
  
  
  
  }  
  
  
  //設置終點  
  function setend(){  
  
      var newcenter = new google.maps.LatLng(22.981666,120.194301);
  
      if(!endpoint){  
  
      endpoint = new google.maps.Marker({  
  
          map:myMap,  
  
          position:newcenter,  
  
          draggable: true  
  
      });}  
  
  }  
  
  //路線導航  
  function start2end(model){  
  
      directionsDisplay = new google.maps.DirectionsRenderer();  
  
      directionsDisplay.setMap(myMap);  
      var startlatlng=startpoint.getPosition();  
      var endlatlng=endpoint.getPosition();  
      $("#jczbresult").show("slow");  
      $("#jczbresultmin").hide();  
      var geocoder = new google.maps.Geocoder();  
      geocoder.geocode({'latLng': startlatlng}, function(results, status) {  
            if (status == google.maps.GeocoderStatus.OK) {  
              if (results[1]) {  
                  $("#startdrive").html('起點:'+results[1].formatted_address);  
              }}});   
      geocoder.geocode({'latLng': endlatlng}, function(results, status) {  
            if (status == google.maps.GeocoderStatus.OK) {  
              if (results[1]) {  
  
                  $("#enddrive").html('終點:'+results[1].formatted_address);  
              }}});   
  
      if(model=='WALKING'){  
          $("#jczbtitle").innerHTML="步行查詢結果";  
          directionsService.route({  
  
              origin: startlatlng,  
  
              destination: endlatlng,  
  
              travelMode: google.maps.DirectionsTravelMode.WALKING  
  
              }, function(result, status){  
  
                  if(status == google.maps.DirectionsStatus.OK){  
  
                       directionsDisplay.setDirections(result);//標記地圖顯示路線  
                       showSteps(result);//右側面板顯示詳細路線信息  
  
                      }  
  
                  });  
  
          }else{  
              $("#jczbtitle").innerHTML="駕車查詢結果";  
              directionsService.route({  
  
                  origin: startlatlng,  
  
                  destination: endlatlng,  
  
                  travelMode: google.maps.DirectionsTravelMode.DRIVING  
  
                  }, function(result, status){  
  
                      if(status == google.maps.DirectionsStatus.OK){  
  
                           directionsDisplay.setDirections(result);  
                           showSteps(result);//右側面板顯示詳細路線信息  
  
                          }  
  
                      });  
  
              }  
  
  
  
  }  
  //顯示起點終點之間的詳細信息  
  function showSteps(directionResult) {  
      $("#driveline").html('');  
      var myRoute = directionResult.routes[0].legs[0];  
      var v_html = '';  
      for (var i = 0; i &lt; myRoute.steps.length; i++) {  
          var geocoder = new google.maps.Geocoder();  
          v_html += '&lt;div class="carSearchtr02" id="driver_step_'+i+'"&gt;'+(i+1)+'.'+myRoute.steps[i].instructions+',此段路程為:'+myRoute.steps[i].distance.value+'米&lt;/div&gt;';  
          //myRoute.steps[i].instructions;  
      }  
      if(v_html != '')  
      {  
           v_html = '&lt;div class="carSearchtr01"&gt;总里程：'+myRoute.distance.value+'米&lt;/div&gt;'+v_html;  
           $("#driveline").html(v_html);  
      }  
      else  
      {  
              $("#driveline").html('很抱歉，沒有找到符合您要的條件，您可以試試下面的方法:&lt;br&gt;調整一下您輸入的搜索關鍵字');  
      }  
  
    }  
  
  });
  
  
      &lt;/script&gt;
  
  &lt;/head&gt; 
  &lt;body&gt; 
  
  &lt;div data-role="page" id="map-page"&gt;
      &lt;div data-role="header"&gt;
          &lt;a href="#" data-icon="home" data-iconpos="notext" data-direction="reverse"&gt;&lt;/a&gt;
          &lt;h1&gt;Maps&lt;/h1&gt;
      &lt;/div&gt;
  
      &lt;div data-role="content" id="map-canvas"&gt;
          &lt;!-- map loads here... --&gt;
      &lt;/div&gt;
      &lt;div data-role="footer"  class="ui-navbar-custom" &gt;
          &lt;div data-role="navbar" class="ui-navbar-custom"&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a  href="index.html" data-ajax="false" data-icon="custom"&gt;首頁&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="listview.html" data-ajax="false" data-icon="custom" &gt;營業項目&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="news.html" data-ajax="false" data-icon="custom" &gt;最新消息&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="photo.html" data-ajax="false" data-icon="custom" &gt;案例分享&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="phone.html" data-ajax="false"  data-icon="custom"&gt;聯絡我們&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>However it doesn't work, can anyone tell me what's the wrong,thx</p>
  
  <p>by the way, I have a demo of the code on</p>
  
  <p><a href="http://appkon.com/demo/project2/maps.html" rel="nofollow">http://appkon.com/demo/project2/maps.html</a></p>
  
  <p>thx again</p>