Bink Bink - 4 years ago 129
AngularJS Question

How can I change the pin text on Google Maps while using directions (Angular) ?

I want to change the icon text A,B,C... (http://i.imgur.com/C6WXyVz.png) to something else while using directions.

Here is some part of the code,

<directions
polyline-options='{strokeColor: "green"}'
draggable="true"
waypoints="{{wayPoints}}"
suppress-markers="false"
origin="51.546550, 0.026345"
destination="51.5493953, 0.0412878">
</directions>


Your help would be appreciated!

Answer Source

directions directive of angularjs-google-maps library does not support such kind of customization, instead you could consider the following solution:

Example

angular.module('mapApp', ['ngMap'])
    .controller("mapCtrl", function ($scope, NgMap, $timeout) {

        $scope.options = {
            "destination": "New York",
            "origin": "Chicago",
            "travelMode": "DRIVING"
        };

        NgMap.getMap().then(function (mapInstance) {
            $scope.map = mapInstance;
            updateRoute($scope.map, $scope.options);
        });


        var setMarker = function (map, pos, label) {
            var marker = new MarkerWithLabel({
                position: pos,
                map: map,
                labelContent: label,
                labelAnchor: new google.maps.Point(15, 65),
                labelClass: "labels", // the CSS class for the label
            });
        };



        var updateRoute = function (map, options) {
            var renderer = new google.maps.DirectionsRenderer(options);
            renderer.setMap(map);
            renderer.setOptions( { suppressMarkers: true } );
            var directionsService = new google.maps.DirectionsService();
            directionsService.route(options, function (response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    $timeout(function () {
                        renderer.setDirections(response); 
                        var leg = response.routes[0].legs[0];
                        setMarker($scope.map, leg.start_location, leg.start_address);
                        setMarker($scope.map, leg.end_location, leg.end_address);
                    });
                }
            });
        };



    });
 .labels {
     color: green;
     background-color: white;
     font-family: "Lucida Grande", "Arial", sans-serif;
     font-size: 16px;
     font-weight: bold;
     text-align: center;
     white-space: nowrap;
   }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="https://maps.google.com/maps/api/js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerwithlabel/src/markerwithlabel.js"></script>






<div ng-app="mapApp" ng-controller="mapCtrl">
    <ng-map zoom="14" center="37.7699298, -122.4469157" style="height:90%">
        <!--directions  draggable="true" panel="directions-panel" suppress-markers="true" origin="{{origin}}" destination="{{destination}}">
        </directions-->
    </ng-map>
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download