Google Maps direction service does not show

Question

I have the following code to show direction form one point to another. I have followed the code provided by this post http://stackoverflow.com/questions/5959788/google-maps-api-v3-how-show-the-direction-from-a-point-a-to-point-b-blue-lineby the user @user2314737.

I changed the code little bit according to my knowledge. But the directions are not shown on my map; What am I doing wrong?

Here is the code;

        <script>
        function initialize(){
            var latlng = new google.maps.LatLng(6.242635,80.051840); //latitude and longitude respectively, pointA
            var pointB = new google.maps.LatLng(6.237038,80.054709);

            var contentString = '<h1> Volunteer House </h1>'+
                '<p>Many people also refer to this home as <b>VH</b>. This is a must see place in the city.'+ 
                    '<br><br>Direction - Pass the <i>balangoda Children Park</i> and head along the <i>K Road</i>. '+
                    'Turn to left at the second turn and walk just 25m.</p>'+
                    '<br>Address - K Road, balangoda, Sri Lanka'+
                    '<br>Website: Volunteer House, <a href="http://r.comlu.com" target="_blank">'+
                    'http://r.comlu.com</a>';

            var infowindow = new google.maps.InfoWindow({
                content: contentString
            });             

            var mapProp = {
                center:latlng, //or you can pointB
                zoom:15, //4 - displays in world map zoom
                mapTypeId:google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);


            //------------------------------ Multiple markers using loops
            var places = [
                ['balangoda Children Park', 6.241713, 80.052307, 2], //2 is the zIndex - order in which these markers should display on top of each other
                ['My Home', 6.242693, 80.051855, 1]
            ];

            var images = ['children.ico', 'office2.ico'];


            var myMarker = new Array(); //store marker in array

            for( var i=0; i<places.length; i++ ){
                    var place = places[i];
                    myMarker[i] = new google.maps.Marker({
                            position: {lat: place[1], lng:place[2]},
                            map: map,
                            title: place[0],
                            icon: images[i],                                
                            zIndex: place[3]
                    });

                    if( i == 1 ){
                            myMarker[1].setAnimation(google.maps.Animation.BOUNCE);

                            myMarker[1].addListener('click', function(){ 
                                infowindow.open(map, myMarker[1]); 
                            })
                    }
            };

            //---------------------------------------------------------------------

            /*------------------------------ show direction from point A to B using Google Maps API Direction Service
               DirectionService - object to send and receive direction requests
               DirectionRenderer - object to render the returned route on the map */

            directionsService = new google.maps.DirectionsService;
            directionsDisplay = new google.maps.DirectionsRenderer({
                    map: map
            });

            //get route from A to B
            calculateAndDisplayRoute( directiionsService, directionsDisplay, latlng, pointB );

            //---------------------------------------------------------------------
        }

        function calculateAndDisplayRoute( dS, dD, pA, pB){
                dS.route(
                        { //1
                            origin: pA,
                            destination: pB,
                            travelMode: google.maps.TravelMode.DRIVING
                        },//1
                        function(response, status){ //2
                            if(status==google.maps.DirectionsStatus.OK){
                                dD.setDirections(response);
                            }
                            else{
                                window.alert('Directions request failed due to ' + status);
                            }
                        } //2
                );
        }


        google.maps.event.addDomListener(window, 'load', initialize)

    </script>

Answer 1

You have a mistake is directionsService and not directiionsService

calculateAndDisplayRoute( directionsService, directionsDisplay, latlng, pointB );