medk medk - 2 years ago 86
jQuery Question

Changing JavaScript to jQuery not working

I found this tutorial about adding a map that calculates the distance between two positions. It works great.
The problem here is that it's written in raw JavaScript, not jQuery.

When I include jQuery and change for example "

" by "
" it won't work.

Here is the original code:

Here is my edited code:

Any suggestions here?


Answer Source

It's like @ssube said: You were passing a jquery object not a DOM node. I tried to accomplish what you wanted by traversing the DOM with JQuery objects and also passing the right DOM node elements to the API. Please check it out and see if that's what you were looking for:

<!DOCTYPE html>
    <style type="text/css">
            font-family: Arial;
            font-size: 10pt;
    <script src="" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <script src=""></script>
        var source, destination;
        var directionsDisplay;
        var directionsService = new google.maps.DirectionsService();
        google.maps.event.addDomListener(window, 'load', function () {
            new google.maps.places.SearchBox($('#txtSource').val());
            new google.maps.places.SearchBox($('#txtDestination').val());
            directionsDisplay = new google.maps.DirectionsRenderer({ 'draggable': true });

        function GetRoute() {
            var mumbai = new google.maps.LatLng(18.9750, 72.8258);
            var mapOptions = {
                zoom: 7,
                center: mumbai
            map = new google.maps.Map($('#dvMap').get(0), mapOptions);

            //*********DIRECTIONS AND ROUTE**********************//
            source = $('#txtSource').val();
            destination = $('#txtDestination').val();

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

            //*********DISTANCE AND DURATION**********************//
            var service = new google.maps.DistanceMatrixService();
                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 = $('#dvDistance');
                    dvDistance.html('Distance: ' + distance + '<br>');
                    dvDistance.html('Duration:' + duration);

                } else {
                    alert('Unable to find the distance via road.');
    <table border="0" cellpadding="0" cellspacing="3">
            <td colspan="2">
                <input type="text" id="txtSource" value="Bandra, Mumbai, India" style="width: 200px" />
                &nbsp; Destination:
                <input type="text" id="txtDestination" value="Andheri, Mumbai, India" style="width: 200px" />
                <br />
                <input type="button" value="Get Route" onclick="GetRoute()" />
                <hr />
            <td colspan="2">
                <div id="dvDistance">
                <div id="dvMap" style="width: 500px; height: 500px">
                <div id="dvPanel" style="width: 500px; height: 500px">
    <br />

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download