Directions markers for Google Maps in AngularJS

Question

I have been searching all over the internet for a solution - but no luck. I'm setting up a website in Umbraco (AngularJS) - and I use UI-Google-Map plugin - and it works great!

I have implemented route directions, and it works like a charm - my only problem is, that I can't change the "A" and "B" icon when the directions show on the map.

This is what my scope looks like:

$scope.map = {
            center: {
                latitude: 55.711898,
                longitude: 9.5387363
            },
            zoom: 12,
            events: {
                'tilesloaded': function (map) {
                    if (load) {
                        $timeout(function () {
                            maps.event.trigger(map, "resize");
                            var marker = new maps.Marker({
                                position: center,
                                map: map,
                                icon: biscuitIcon
                            });
                            marker.setMap(map);
                            map.setCenter(marker.getPosition());
                            directionsDisplay.setMap(map);
                        }, 500);
                        load = false;
                    } else {
                        maps.event.trigger(map, "resize");
                    }
                }
            },
            options: {
                disableDefaultUI: true,
                zoomControl: false,
                styles: [{'featureType':'water','elementType':'all','stylers':[{'color':'#f0f0f0'}]},{'featureType':'landscape','elementType':'geometry','stylers':[{'color':'#cccccc'}]},{'featureType':'road.highway','elementType':'geometry','stylers':[{'color':'#000000'}]},{'featureType':'road.arterial','elementType':'geometry.fill','stylers':[{'color':'#363636'}]},{'featureType':'poi.park','elementType':'geometry','stylers':[{'color':'#cccccc'}]},{'featureType':'poi.attraction','elementType':'geometry.fill','stylers':[{'color':'#cccccc'}]}]
            },
            control: {}
        };

And here is what happens, when you fill out the "From" - "To" form:

$scope.getDirections = function(){
            directionsService.route({
                origin: $scope.startlocation,
                destination: $scope.endlocation,
                optimizeWaypoints: true,
                travelMode: google.maps.TravelMode.DRIVING
            }, function(response, status) {
                if (status === google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(response);
                    var route = response.routes[0].legs[0];
                  directionsDisplay.setPanel(document.getElementById('directions-panel'));
                } else {
                    if(status === 'NOT_FOUND') {
                        window.alert('No results - Please try again');
                    }
                }
            });
        }

I have tried the "makeMarker" method ( http://jsfiddle.net/6LwgQ/1/ ) but no luck. Can any of you point out where I'm banging my head against the wall?

Oh, btw. I have tried to "console.log" the info when using "makeMarker" - and all the info is shown in my console, but it does not appear on my map :( I'm seriously desperate now...

Thanks in advance! / Kucko

Answer 1

For placing markers you could utilize ui-gmap-markers directive. The folliowing example shows how print route and set end/start styled markers:

 var appMaps = angular.module('appMaps', ['uiGmapgoogle-maps']); appMaps.controller('mainCtrl', function ($scope, uiGmapIsReady, $log) { $scope.startlocation = 'New York, NY'; $scope.endlocation = 'San Diego, California'; $scope.markers = []; $scope.icons = { start: { url: 'http://maps.google.com/mapfiles/ms/micons/blue.png', size: { width: 44, height: 32 }, origin: { x: 0, y: 0 }, anchor: { x: 22, y: 32 } }, end: { url: 'http://maps.google.com/mapfiles/ms/micons/green.png', size: { width: 44, height: 32 }, origin: { x: 0, y: 0 }, anchor: { x: 22, y: 32 } } }; $scope.map = { center: { latitude: 55.711898, longitude: 9.5387363 }, zoom: 12, options: { disableDefaultUI: true, zoomControl: false, styles: [{ 'featureType': 'water', 'elementType': 'all', 'stylers': [{ 'color': '#f0f0f0' }] }, { 'featureType': 'landscape', 'elementType': 'geometry', 'stylers': [{ 'color': '#cccccc' }] }, { 'featureType': 'road.highway', 'elementType': 'geometry', 'stylers': [{ 'color': '#000000' }] }, { 'featureType': 'road.arterial', 'elementType': 'geometry.fill', 'stylers': [{ 'color': '#363636' }] }, { 'featureType': 'poi.park', 'elementType': 'geometry', 'stylers': [{ 'color': '#cccccc' }] }, { 'featureType': 'poi.attraction', 'elementType': 'geometry.fill', 'stylers': [{ 'color': '#cccccc' }] }] }, control: {} }; uiGmapIsReady.promise() .then(function (instances) { printRoute(); }); var printRoute = function () { var directionsService = new google.maps.DirectionsService(); var directionsRequest = { origin: $scope.startlocation, destination: $scope.endlocation, optimizeWaypoints: true, travelMode: google.maps.TravelMode.DRIVING }; directionsService.route(directionsRequest, function (response, status) { if (status === google.maps.DirectionsStatus.OK) { var map = $scope.map.control.getGMap(); var directionsDisplay = new google.maps.DirectionsRenderer({ map: map, directions: response, suppressMarkers: true }); var leg = response.routes[0].legs[0]; setMarker(0,leg.start_location, $scope.icons.start, 'title'); setMarker(1,leg.end_location, $scope.icons.end, 'title'); } else { $log.error('Request failed: ' + status); } }); } var setMarker = function (id,latLng, icon, title) { var markerInfo = { id: id, latitude: latLng.lat(), longitude: latLng.lng(), title: title, icon: icon }; $scope.markers.push(markerInfo); }; }); 

 .angular-google-map-container { position: absolute; top: 0; bottom: 0; right: 0; left: 0; } 

 <script src="https://code.angularjs.org/1.3.14/angular.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script> <script src="http://rawgit.com/angular-ui/angular-google-maps/2.0.X/dist/angular-google-maps.js"></script> <div id="map_canvas" ng-app="appMaps" ng-controller="mainCtrl"> <ui-gmap-google-map center="map.center" zoom="map.zoom" control="map.control" options="map.options" events="map.events"> <ui-gmap-markers models="markers" coords="'self'" icon="'icon'"> </ui-gmap-markers> </ui-gmap-google-map> </div> 

Plunker