google maps directions service geolocation and address input jquery mobile -

i've put simple jquery mobile map uses google maps , directions service. works, except if user inputs address (either start or destination) without entering city results extremely far out. google directions return area somewhere in province or in us.

i thought directions based off lat long origin , attempt use local address geocoding? how can improve input user can more accurate results based on entering address?

below code it:

 $(document).on("pageinit", "#map_page", function () {             initialize();         });          $(document).on('click', '#getdirectionssubmit', function (e) {             e.preventdefault();             calculateroute();         });          $(document).on('click', '#getcurrentloc', function (e) {             e.preventdefault();             findcurrentposition();         });          var directiondisplay,             directionsservice = new google.maps.directionsservice(),             map;         var geocoder = new google.maps.geocoder();          function initialize() {             // set default center of map             var mapcenter = new google.maps.latlng(55.1669513, -118.8031093);             // set route options (draggable means can alter/drag route in map)             var rendereroptions = { draggable: true };             directionsdisplay = new google.maps.directionsrenderer(rendereroptions);              //updatemapsize(mapcenter);             // set display options map             var myoptions = {                 maptypecontrol: false,                 zoom: 12,                 maptypeid: google.maps.maptypeid.roadmap,                 center: mapcenter             }             // add map map placeholder             map = new google.maps.map(document.getelementbyid("map_canvas"), myoptions);              // bind map directions             directionsdisplay.setmap(map);             // point directions container direction details             directionsdisplay.setpanel(document.getelementbyid("directionspanel"));                   }          function notfound(msg) {             alert('could not find location :(')         }          function findcurrentposition() {                // start geolocation api             if (navigator.geolocation) {                 // when geolocation available on device, run function                 navigator.geolocation.getcurrentposition(foundyou, notfound);             } else {                 // when no geolocation available, alert message                 alert('geolocation not supported or not enabled.');             }         }          function foundyou(position) {             // convert position returned geolocation api google coordinate object             var latlng = new google.maps.latlng(position.coords.latitude, position.coords.longitude);             // try reverse geocode location return human-readable address             geocoder.geocode({ 'latlng': latlng }, function (results, status) {                 if (status == google.maps.geocoderstatus.ok) {                     // if geolocation recognized , address found                     if (results[0]) {                         // add marker map on geolocated point                         marker = new google.maps.marker({                             position: latlng,                                                map: map                         });                         // compose string address parts                         var address = results[0].address_components[1].long_name + ' ' + results[0].address_components[0].long_name + ', ' + results[0].address_components[3].long_name                         // set located address link, show link , add click event handler                              // onclick, set geocoded address start-point formfield                             $('#from').text(address);                             $('#from').val(address);                             // call calcroute function start calculating route                             }                 } else {                     // if address couldn't determined, alert , error status message                     alert("geocoder failed due to: " + status);                 }             });         }          function calculateroute() {             var selectedtravelmode = $('#mode option:selected').val();             // alert(selectedtravelmode);             start = $("#from").val();                 end = $("#to").val();              if (start == '' || end == '') {                 // cannot calculate route                 $("#results").hide();                 return;             }             else {                 var request = {                     origin: start,                     destination: end,                                         travelmode: google.maps.directionstravelmode[selectedtravelmode]                 };                  directionsservice.route(request, function (response, status) {                     if (status == google.maps.directionsstatus.ok) {                         directionsdisplay.setdirections(response);                         $("#results").show();                                        }                     else {                         $("#results").hide();                     }                 });              }         }     </script> </head> <body>     <div data-role="page" id="map_page">         <div data-role="header">             <h1>directions map</h1>             <a href="http://mysiteaddress/" data-ajax="false" rel="external" id="returnmobile">home</a>         </div>         <div data-role="content" class="ui-content">             <div>                 <div id="map_canvas" style="width: 100%; height: 300px"></div>                 <div data-role="my-ui-field-contain">                     <!--<div>             <label for="mode" class="select">transportation method:</label>         </div>-->                     <div>                         <select name="select-choice-0" id="mode">                             <option value="transit">public transit</option>                             <option value="driving">driving</option>                             <option value="walking">walking</option>                             <option value="bicycling">bicycling</option>                         </select>                     </div>                 </div>                                 <div data-role="my-ui-field-contain">                     <input type="text" id="from" placeholder="from address" value="" /><button id="getcurrentloc" data-icon="star">use current location</button>                 </div>                 <div data-role="my-ui-field-contain">                     <input type="text" id="to" placeholder="to destination" value="" />                 </div>                 <a data-icon="search" data-role="button" href="#" id="getdirectionssubmit">get directions</a>             </div>             <div id="results" style="display:none;">                 <div id="directionspanel"></div>             </div>         </div>     </div> </body> </html> 

i have working. added autocomplete feature text input boxes limited output country level helped avoid incorrect start , end destination issues.

var options = {componentrestrictions: {country: 'ca'}};