Google maps directionsService() - angularJs

Question

Hi I have a problem :) In AngularJS I create modul for G-maps API "DirectionsStatus". Modul check my position (geolocation) next user select "destination" and create "map directions". Everything seems ok but did create "map directions". HTML:

<div class="wrapp" ng-controller="googlemapoutput">
            <div id="map-canvas" style="height: 400px;"></div>
             <div class="row">
                <select id="end">
                    <option> 
                        Floriańska 42, 38-200 Jasło, Polska
                    </option>
                    <option>
                        Zegrzyńska 1, Legionowo, Polska
                    </option>
                </select>
                <button id="btn" ng-click="calcRoute()">
                    Jak dojechać ?
                </button>
            </div>
        </div>

JS:

angular.module('starter.controllers', [])
.controller('googlemapoutput', function ($scope) {

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

    $scope.initialize = function () {
        navigator.geolocation.getCurrentPosition(function (position) {

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

            var mapOptions = {
                zoom: 18,
                center: pos
            };

            map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);

            var marker = new google.maps.Marker({
                position: pos,
                map: map
            });
        });
    };

    $scope.calcRoute = function () {
        navigator.geolocation.getCurrentPosition(function (position) {

            var end = document.getElementById('end').value;
            var pos = new google.maps.LatLng(
            position.coords.latitude,
            position.coords.longitude);

            var request = {
                origin: pos,
                destination: end,
                travelMode: google.maps.TravelMode.DRIVING
            };

            directionsService.route(request, function (response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(response);
                    console.log(status);
                }
            });
        });
    };

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

});

Thx for help :)

Answer 1

The problem is you're not telling the directionsDisplay object which map it's associated with. You could add this line here just before (or just after) you call setDirections.

if (status == google.maps.DirectionsStatus.OK) {
    directionsDisplay.setMap(map);
    directionsDisplay.setDirections(response);
}

Alternatively you'd probably be better doing it when you create the map, in the initialize function:

map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

directionsDisplay.setMap(map);