Click here to Skip to main content
15,868,016 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I'm having this code from html



C#
<pre lang="xml"><head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="~/Content/style.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&key=AIzaSyDCnBHmfdBN--Ais_-RC6ShvjhzRCmVmPk">
    </script>







    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
    <script type="text/javascript">
        var map;
        var directionsDisplay;
        var directionsService = new google.maps.DirectionsService();

        $(document).ready(function () {

            //draw a map centered at Empire State Building Newyork
            var latlng = new google.maps.LatLng(-61.773123, 139.570313);
            var myOptions = {
                zoom: 10,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

            directionsDisplay = new google.maps.DirectionsRenderer();
            directionsDisplay.setMap(map);
            //directionsDisplay.setPanel(document.getElementById("divDirections"));

            $("#btnGetDirections").click(function () {
                calcRoute($("#txtAddress1").val(), $("#txtAddress2").val());
            });


        });




        function calcRoute(start, end) {
            var request = {
                origin: start,
                destination: end,
                travelMode: google.maps.TravelMode.DRIVING,
                provideRouteAlternatives: false
            };
            directionsService.route(request, function (result, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(result);
                    displayDirections(result);
                }
            });
        }

        function displayDirections(result) {
            var html = '<div style="margin:5px;padding:5px;background-color:#EBF2FC;border-left: 1px solid #EBEFF9;border-right: 1px solid #EBEFF9;text-align:right;">';
            html = html + '<span><strong>' + $.trim(result.routes[0].legs[0].distance.text.replace(/"/g, '')) + ', ' + $.trim(result.routes[0].legs[0].duration.text.replace(/"/g, '')) + '</strong></span></div>';
            $("#divDirections").html(html);

            //Display Steps
            var steps = result.routes[0].legs[0].steps;
            for (i = 0; i < steps.length; i++) {
                var instructions = JSON.stringify(steps[i].instructions);
                var distance = JSON.stringify(steps[i].distance.text);
                var time = JSON.stringify(steps[i].duration.text);
                $("#divDirections").append(getEmbedHTML(i + 1, instructions, distance, time));
            }
        }

        function getEmbedHTML(seqno, instructions, distance, duration) {
            var strhtml = '<div class="row">';
            strhtml = strhtml + '<span>' + seqno + '</span>&nbsp;' + $.trim(instructions.replace(/"/g, '')) + '<br/>'
            strhtml = strhtml + '<div style="text-align:right;"><span>' + $.trim(distance.replace(/"/g, '')) + ' <span></div>'
            strhtml = strhtml + '</div><div class="separator"></div>';

            return strhtml;
        }
<pre lang="Javascript">

     <div id="sidebar">
            <div class="row" style="background:#E3EDFA">
                <label> Select  your Origin:</label>
                <br />
                <br />
                @*<input type="text" id="txtAddress1" class="text" value="350 5th Ave, New York, NY" />*@
                <select id="txtAddress1" class="text">
                    <option value="" disabled selected>Select your Origin</option>
                    <option>Durban City Hall</option>
                    <option>Pietermaritzburg</option>

                </select>
                <br />
               <br/>
               
                                 <h2>Click Search for direction</h2>
                <br/>
                <div>
                    <div>
                        <input type="hidden" id="txtAddress2" class="text" value="@Html.DisplayFor(model => model.destination, new { @Type="hidden" })" />           <img src="~/Content/images/se.jpg " id="btnGetDirections" border="0" width="45" height="45" style="vertical-align:middle;" />
                    </div>
                </div>
                  </span>
                
            </div><pre lang="java">
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900