autocomplete textbox for google maps

See more:

C#

ASP.NET

Javascript

Google-Maps

I am using google maps in my asp.net website, i have two textboxes for find route between them. Everything working fine but i want autocomplete in my two textboxes, while typing it should give hints by google map. Hope you understand my need.

        var lat = '<%=lat%>';
        var lon = '<%=lon%>';
        var directionsDisplay;
        var directionsService = new google.maps.DirectionsService();

         function InitializeMap() {
                         
             directionsDisplay = new google.maps.DirectionsRenderer();
             var latlng = new google.maps.LatLng(lat, lon);
             var myOptions =
             {
                 zoom: 13,
                 center: latlng,
                 mapTypeId: google.maps.MapTypeId.ROADMAP
             };
             var map = new google.maps.Map(document.getElementById("Gmap"), myOptions);

             directionsDisplay.setMap(map);
             directionsDisplay.setPanel(document.getElementById('directionpanel'));

             var control = document.getElementById('control');
             control.style.display = 'block';

function calcRoute() {

             var start = document.getElementById('from').value;
             var end = document.getElementById('to').value;
             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);
                 }
             });
         }
         
         function btnDirections_onclick() {
             calcRoute();
         }

         window.onload = InitializeMap;

<table id ="control">
                    <tr>
                    <td>
                        
                    <table>
                    <tr>
                    <td>From:</td>
                    <td><input type="text" id="from" name="from" style="width: 300px" />
                    </td>
                    </tr>

                    <tr>
                    <td>To:</td>
                    <td><input type="text" id="to" name="to" style="width: 300px" /></td>
                    </tr>

                    <tr>
                    <td></td>
                    <td><input id="btnDirections" type="button" value="GetDirections" onclick="return btnDirections_onclick()" /></td>
                    </tr>
                    </table>

                    </td>
                    </tr>
                </table>
                <div id ="Gmap" style="height: 300px; width: 600px; removed 25px; removed 25px;" ></div>
                <br/>
                <div id ="directionpanel"  style="height: 300px; overflow: auto; removed 25px; removed 25px;" ></div>