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... ( to something else while using directions.

Here is some part of the code,

polyline-options='{strokeColor: "green"}'
origin="51.546550, 0.026345"
destination="51.5493953, 0.0412878">

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:


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

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

        NgMap.getMap().then(function (mapInstance) {
            $ = mapInstance;
            updateRoute($, $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.setOptions( { suppressMarkers: true } );
            var directionsService = new google.maps.DirectionsService();
            directionsService.route(options, function (response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    $timeout(function () {
                        var leg = response.routes[0].legs[0];
                        setMarker($, leg.start_location, leg.start_address);
                        setMarker($, 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=""></script>
<script src=""></script>
<script src=""></script>
<script src=""></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}}">

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