routeParms is not working as expected with googlemaps directions api

Question

I'm trying to send latitude and longitude of a location from one html file to another file by using $routeParams

I used google maps directions API in the second page to show the direction from the soruce lat and long to dest lat and long,

Google maps API is working fine when I tried without using the $routeParams, but when I used routeparams it is not working as expected.

This is what the error that I got when I used routeparams :

jquery.min.js:5 GET https://maps.googleapis.com/maps/api/js?key=AIzaSyAandyF_iZi1pAlTiiFKlLb4CKxjmSLDJA&callback=%20initMap&_=1508839370960 net::ERR_ABORTED

Here's my code:

<a href="#/tracktruck/17.418611/78.519708/17.424653/78.64478"><button class="btn col-xs-6 btn btn-primary" style="color:white;width:48%;margin-top: 20px">track truck</button></a>

JS COde:

.when('/tracktruck/:srcfrmlat/:srcfrmlag/:srctolat/:srctolag', {
    templateUrl: 'tracktruck.html',
    controller: 'tracktruckController'
})

Controller :

app.controller('tracktruckController', ['$scope', '$http','$routeParams',function ($scope, $http,$routeParams) {

var initMap = function() {
    var directionsDisplay;
    var directionsService = new google.maps.DirectionsService();
    var directionsMap;
    var z = document.getElementById("map");
    var start;
    var end;
    getDirectionsLocation();
    function getDirectionsLocation() {
        console.log("getDirectionsLocation");
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showDirectionsPosition);
        } else {
            z.innerHTML = "Geolocation is not supported by this browser.";
        }
    }
    function showDirectionsPosition(position) {
        console.log("showDirectionsPosition");
        directionsLatitude = Number($routeParams.srcfrmlat);
        directionsLongitude =  Number($routeParams.srcfrmlag);
        directionsEndLatitude = Number($routeParams.srctolat);
        directionsEndLongitude =  Number($routeParams.srctolat);
        start = new google.maps.LatLng(directionsLatitude,directionsLongitude);
        end = new google.maps.LatLng(directionsEndLatitude,directionsEndLongitude);
        getDirections();
        //console.log(directionsLatLng);
    }

    function getDirections() {
        console.log('getDirections');
        directionsDisplay = new google.maps.DirectionsRenderer();
        //start = new google.maps.LatLng(directionsLatLng);
        var directionsOptions = {
            zoom:9,
            center: start
        }
        directionsMap = new google.maps.Map(document.getElementById("map"), directionsOptions);
        directionsDisplay.setMap(directionsMap);
        calcRoute();
    }

    function calcRoute() {
        console.log("calcRoute");
 var request = {
            origin:start,
            destination:end,
            travelMode: google.maps.TravelMode.TRANSIT
        };
        directionsService.route(request, function(result, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(result);
            }
        });
    }

        getDirectionsLocation();


}

initMap();
}]);

Tracktruck html file :

<div id="map" style=" height: 400px;width: 100%;"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAandyF_iZi1pAlTiiFKlLb4CKxjmSLDJA&callback= initMap"></script>

Thanks in advance :)

Answer 1

There is a typo in your code. It should be srctolag instead of srctolat for your directionsEndLongitude parameter.

Change

directionsEndLongitude =  Number($routeParams.srctolat);

to

directionsEndLongitude =  Number($routeParams.srctolag);