how to change the ng-map marker's text 'A' and 'B'

Hi I want to change markup text of ng-map. It should display "start" and "end" instead of "A" and "B" respectively.

I did refer this, but no luck. It shows both the text "start" and "A" on markup.

Also If you observe, distance between source and destination is not same as what actual google map shows.

So I have three questions here.

1) Change markup text "start" instead of "A"

2) Distance between source and destination

3) I want to show this map on click of button "Draw Map" using AngularJS.

Below is my code.

var mainModule = angular.module('mainApp',['ngRoute', 'ngMap']);
	mainModule.controller('mapCtrl', function($scope){
		$scope.sources = ["mumbai", "pune", "bangalore", "delhi", "netherlands"];
		$scope.destinations = ["pune", "bangalore", "mumbai", "delhi", "andorra"];
		$scope.origin = "mumbai";
		$scope.dest = "pune";
		$scope.drawMap = function(){
			var sourceVal = $('#sourceDdl').val();
			var destnVal = $("#destinationDdl").val();
			$scope.origin = sourceVal;
			$scope.dest = destnVal;
		}
		
	});

body {
    overflow: auto;
    background-color: #000000;
}

/* google map */
.ng-map-section{
	width: 800px;
    height: 600px;
    overflow: hidden;
    position: relative;
    background: #e6e6e6;
    border: 20px solid #FFF;
    margin-top: 20px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
<script src="https://maps.google.com/maps/api/js?libraries=placeses,visualization,drawing,geometry,places"></script>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title>ng-map</title>

    <link href="css/bootstrap.css" rel="stylesheet">
  
    
	
</head>
<body>
		
		<div class="container ng-map-section" ng-app="mainApp" ng-controller="mapCtrl">
			<div style="float:left;width:70%;">
				<ng-map zoom="14" center="" style="height:600px">
					<directions 
						draggable="true" 
						travel-mode="DRIVING" 
						origin="{{origin}}" 
						destination="{{dest}}"
						suppressMarkers='true'>
					</directions>
					<custom-marker id="start" position="{{origin}}">
						<div> Start </div>
					</custom-marker>
					<custom-marker id="end" position="{{dest}}">
						<div> End </div>
					</custom-marker>
				</ng-map>
				
			</div>
			<div style="float:right;width:28%">
				<label for="sourceDdl">Source: </label>
				<select id="sourceDdl">
					<option ng-repeat="source in sources" value="{{source}}">{{source}}</option>
				</select>
				<br><br>
				<label for="destinationDdl">Destination: </label>
				<select id="destinationDdl">
					<option ng-repeat="destination in destinations"  value="{{destination}}">{{destination}}</option>
				</select>
				<br><br>
				<label>Distance: {{map.directionsRenderers[0].directions.routes[0].overview_path.length}}</label><br>
				<input type="button" ng-click="drawMap()" value="Draw Map">
			</div>
			<!--
			<div id="directions-panel" style="width: 28%; float:left; height: 100%; overflow: auto; padding: 0px 5px">
			</div>-->
		</div>
	
</body>
</html>

Solution

The name attribute should be suppress-markers, so replace suppressmarkers='true' with suppress-markers="true"

Updated example

angular.module('mainApp', ['ngRoute', 'ngMap'])
    .controller('mapCtrl', function($scope) {
        $scope.sources = ["mumbai", "pune", "bangalore", "delhi", "netherlands"];
        $scope.destinations = ["pune", "bangalore", "mumbai", "delhi", "andorra"];
        $scope.origin = "mumbai";
        $scope.dest = "pune";
        $scope.drawMap = function() {
            var sourceVal = $('#sourceDdl').val();
            var destnVal = $("#destinationDdl").val();
            $scope.origin = sourceVal;
            $scope.dest = destnVal;
        }

    });

body {
    overflow: auto;
    background-color: #000000;
}

/* google map */
.ng-map-section{
	width: 800px;
    height: 600px;
    overflow: hidden;
    position: relative;
    background: #e6e6e6;
    border: 20px solid #FFF;
    margin-top: 20px;
}

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
    <script src="https://maps.google.com/maps/api/js?libraries=placeses,visualization,drawing,geometry,places"></script>
    <script src="https://code.angularjs.org/1.3.15/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.js"></script>
    <script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>



    <div class="container ng-map-section" ng-app="mainApp" ng-controller="mapCtrl">
        <div style="float:left;width:70%;">
            <ng-map zoom="14" center="" style="height:600px">
                <directions 
                draggable="true" 
                travel-mode="DRIVING" 
                origin="{{origin}}" 
                destination="{{dest}}" 
                suppress-markers="true">
                </directions>
                <custom-marker id="start" position="{{origin}}">
                    <h3> Start </h3>
                </custom-marker>
                <custom-marker id="end" position="{{dest}}">
                    <h3> End </h3>
                </custom-marker>
            </ng-map>

        </div>
        <div style="float:right;width:28%">
            <label for="sourceDdl">Source: </label>
            <select id="sourceDdl">
                <option ng-repeat="source in sources" value="{{source}}">{{source}}</option>
            </select>
            <br>
            <br>
            <label for="destinationDdl">Destination: </label>
            <select id="destinationDdl">
                <option ng-repeat="destination in destinations" value="{{destination}}">{{destination}}</option>
            </select>
            <br>
            <br>
            <label>Distance: {{map.directionsRenderers[0].directions.routes[0].overview_path.length}}</label>
            <br>
            <input type="button" ng-click="drawMap()" value="Draw Map">
        </div>
        
    </div>