title: how to change the ng-map marker's text 'A' and 'B'
body: <p>Hi I want to change markup text of ng-map. It should display "start" and "end" instead of "A" and "B" respectively.</p>
  
  <p>I did refer <a href="https://stackoverflow.com/questions/36807409/how-to-remove-default-a-b-markers-on-ngmap">this</a>, but no luck.
  It shows both the text "start" and "A" on markup.</p>
  
  <p>Also If you observe, distance between source and destination is not same as what actual google map shows.</p>
  
  <p>So I have three questions here.</p>
  
  <p>1) Change markup text "start" instead of "A"</p>
  
  <p>2) Distance between source and destination</p>
  
  <p>3) I want to show this map on click of button "Draw Map" using AngularJS.</p>
  
  <p>Below is my code.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><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;
    }
    
   });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"&gt;&lt;/script&gt; 
  &lt;script src="https://maps.google.com/maps/api/js?libraries=placeses,visualization,drawing,geometry,places"&gt;&lt;/script&gt;
  &lt;script src="https://code.angularjs.org/1.3.15/angular.js"&gt;&lt;/script&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.js"&gt;&lt;/script&gt;
  &lt;script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"&gt;&lt;/script&gt;
  
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
   &lt;meta charset="utf-8"&gt;
   &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no" /&gt;
      &lt;title&gt;ng-map&lt;/title&gt;
  
      &lt;link href="css/bootstrap.css" rel="stylesheet"&gt;
    
      
   
  &lt;/head&gt;
  &lt;body&gt;
    
    &lt;div class="container ng-map-section" ng-app="mainApp" ng-controller="mapCtrl"&gt;
     &lt;div style="float:left;width:70%;"&gt;
      &lt;ng-map zoom="14" center="" style="height:600px"&gt;
       &lt;directions 
        draggable="true" 
        travel-mode="DRIVING" 
        origin="{{origin}}" 
        destination="{{dest}}"
        suppressMarkers='true'&gt;
       &lt;/directions&gt;
       &lt;custom-marker id="start" position="{{origin}}"&gt;
        &lt;div&gt; Start &lt;/div&gt;
       &lt;/custom-marker&gt;
       &lt;custom-marker id="end" position="{{dest}}"&gt;
        &lt;div&gt; End &lt;/div&gt;
       &lt;/custom-marker&gt;
      &lt;/ng-map&gt;
      
     &lt;/div&gt;
     &lt;div style="float:right;width:28%"&gt;
      &lt;label for="sourceDdl"&gt;Source: &lt;/label&gt;
      &lt;select id="sourceDdl"&gt;
       &lt;option ng-repeat="source in sources" value="{{source}}"&gt;{{source}}&lt;/option&gt;
      &lt;/select&gt;
      &lt;br&gt;&lt;br&gt;
      &lt;label for="destinationDdl"&gt;Destination: &lt;/label&gt;
      &lt;select id="destinationDdl"&gt;
       &lt;option ng-repeat="destination in destinations"  value="{{destination}}"&gt;{{destination}}&lt;/option&gt;
      &lt;/select&gt;
      &lt;br&gt;&lt;br&gt;
      &lt;label&gt;Distance: {{map.directionsRenderers[0].directions.routes[0].overview_path.length}}&lt;/label&gt;&lt;br&gt;
      &lt;input type="button" ng-click="drawMap()" value="Draw Map"&gt;
     &lt;/div&gt;
     &lt;!--
     &lt;div id="directions-panel" style="width: 28%; float:left; height: 100%; overflow: auto; padding: 0px 5px"&gt;
     &lt;/div&gt;--&gt;
    &lt;/div&gt;
   
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/GDXRs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GDXRs.png" alt="enter image description here"></a></p>