Link to home
Start Free TrialLog in
Avatar of Ed
EdFlag for United Kingdom of Great Britain and Northern Ireland

asked on

Google Maps with Webforms

HI

I'm having problems trying to replace google maps  Input boxes with Webform txt boxes.  Its not working.

 I think its something to do with the runat=server

<script type="text/javascript">
        var source, destination;
        var directionsDisplay;
        var directionsService = new google.maps.DirectionsService();
        google.maps.event.addDomListener(window, 'load', function () {
            new google.maps.places.SearchBox(document.getElementById('txtSource'));
            new google.maps.places.SearchBox(document.getElementById('txtDestination'));
            directionsDisplay = new google.maps.DirectionsRenderer({ 'draggable': true });
        });

        function GetRoute() {
            var uk= new google.maps.LatLng(52.529614, -3.092071);
            var mapOptions = {
                zoom: 17,
                center: uk
            };
            map = new google.maps.Map(document.getElementById('dvMap'), mapOptions);
            directionsDisplay.setMap(map);
            directionsDisplay.setPanel(document.getElementById('dvPanel'));

            //*********DIRECTIONS AND ROUTE**********************//
            source = document.getElementById("txtSource").value;
            destination = document.getElementById("txtDestination").value;

  

            var request = {
                origin: source,
                destination: destination,
                travelMode: google.maps.TravelMode.DRIVING
            };
            directionsService.route(request, function (response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(response);
                }
            });

            //*********DISTANCE AND DURATION**********************//
            var service = new google.maps.DistanceMatrixService();
            service.getDistanceMatrix({
                origins: [source],
                destinations: [destination],
                travelMode: google.maps.TravelMode.DRIVING,
                unitSystem: google.maps.UnitSystem.METRIC,
                avoidHighways: false,
                avoidTolls: false
            }, function (response, status) {
                if (status == google.maps.DistanceMatrixStatus.OK && response.rows[0].elements[0].status != "ZERO_RESULTS") {
                    var distance = response.rows[0].elements[0].distance.text;
                    var duration = response.rows[0].elements[0].duration.text;
                    var dvDistance = document.getElementById("dvDistance");
                    dvDistance.innerHTML = "";
                    dvDistance.innerHTML += "Distance to appointment: " + distance + "<br />";
                    dvDistance.innerHTML += "Duration:" + duration;

                } else {
                    alert("Unable to find the distance via road.");
                }
            });
        }
    </script>

Open in new window


Currently txtsource and txtDestination are html input boxes

  <input type="text" id="txtSource"  value="cf159jp" style="width: 200px" />
                &nbsp; Destination:
                <input type="text" id="txtDestination"  value="sa460ju" style="width: 200px" />

Open in new window


but I'd like then to be webform txtboxes .

  <asp:TextBox ID="txtstart" runat="server"></asp:TextBox>
<asp:TextBox ID="txtend" runat="server"></asp:TextBox>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Shalu M
Shalu M
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial