Google maps directions from users location

Question

I've got this website where customers have their own profile. They each have a map on their profile. When someone is viewing their profile I would like them to have the abillity to press on theese buttons and get directions by car, transit or walking.

The buttons work, and I get the users geo-location. But the thing is, there is never a route found, for some reason.

Is there something wrong with the JS code?

$.get("http://maps.google.no/maps/api/geocode/json?address={{ $company -> forretningsadresse_adresse  }}, {{ $company -> forretningsadresse_postnummer }} {{ $company -> forretningsadresse_poststed }}", function(data) {

            var mapStyle = [];
            var pos = new google.maps.LatLng(data["results"][0]["geometry"]["location"]["lat"], data["results"][0]["geometry"]["location"]["lng"]);
            var myOptions = {
                zoom: 15,
                center: pos,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                styles: mapStyle,
                scrollwheel: true
            };

            map = new google.maps.Map(document.getElementById('map'), myOptions);
            directionsDisplay = new google.maps.DirectionsRenderer();
            directionsDisplay.setMap(map);

            var marker = new google.maps.Marker({
                position: pos,
                map: map,
                animation: google.maps.Animation.DROP,
                title: 'Posisjon'
            });

            mapsBusinessPosition = pos;

        });

        function initMap(pos) {

            var directionsDisplay;
            directionsService = new google.maps.DirectionsService();
            var mapStyle = [];

            var myOptions = {
                zoom: 15,
                center: pos,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                styles: mapStyle,
                scrollwheel: true
            };

            map = new google.maps.Map(document.getElementById('map'), myOptions);

            directionsDisplay = new google.maps.DirectionsRenderer();
            directionsDisplay.setMap(map);

            var marker = new google.maps.Marker({
                position: pos,
                map: map,
                animation: google.maps.Animation.DROP,
                title: 'Posisjon'
            });

            mapsBusinessPosition = pos;
        }

        function getDirections(mode) {

            $("#tripDuration").html("Laster...");

            var userLocation;
            if (navigator.geolocation) {

                navigator.geolocation.getCurrentPosition(function(position) {

                    userLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

                    var request = {
                        origin: userLocation,
                        destination: mapsBusinessPosition,
                        travelMode: mode
                    };

                    directionsService.route(request, function(result, status) {
                        if (status == google.maps.DirectionsStatus.OK) {
                            directionsDisplay.setDirections(result);
                            $("#tripDuration").html(result.routes[0].legs[0].duration.text);
                        } else {
                            $("#tripDuration").html("Fant ingen rute");
                        }
                    });
                }, function() {
                    alert("Argh!");
                });

            }

            else {
                alert("Argh!");
            }

        }

And here are the buttons.

<div class="directions">
    <img src="img/transit.png" alt="transit" onclick="getDirections(google.maps.TravelMode.TRANSIT);"/>
    <img src="img/car.png" alt="car" onclick="getDirections(google.maps.TravelMode.DRIVING);"/>
    <img src="img/walking.png" alt="walking" onclick="getDirections(google.maps.TravelMode.WALKING);"/>
    <span id="tripDuration"></span>
</div>

Oh, and the maps works fine at first glance, it's only the directions that wont work.

So what do I do wrong?

Thanks in advance.

Answer 1

Your example works for me. To find out what might be causing issues on your side, try to log errors like this:

if (navigator.geolocation) {

            navigator.geolocation.getCurrentPosition(function(position) {

                userLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

                var request = {
                    origin: userLocation,
                    destination: mapsBusinessPosition,
                    travelMode: mode
                };

                directionsService.route(request, function(result, status) {
                    if (status == google.maps.DirectionsStatus.OK) {
                        directionsDisplay.setDirections(result);
                        $("#tripDuration").html(result.routes[0].legs[0].duration.text);
                    } else {
                        console.log(status); //Error of Google Maps Directions Service
                        $("#tripDuration").html("Fant ingen rute");
                    }
                });
            }, function(error) { //HERE!!
                console.log(error); //Error of HTML5 geolocation API
            });

}else {
  console.log('Your browser does not support geolocation API'); //HERE!!!
}

And watch javascript console for output. This might give you more clues.

From the top of my head, there are couple of things that might be causing the issue.

1. You are not running the application from application server, but from file:// url. In this case some browsers are blocking navigator.geolocation requests. More about this in this SO question
2. You are running your application which is neither localhost nor HTTPS server and you are using Chrome version >= 50. Since version 50 Chrome started blocking navigator.geolocation requests if not secure (HTTPS) server, more about this here.
3. There is some problem with directionsService. Check status for the information and the list of statuses here to find out what might be causing the error.