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

Question

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>

you could create your own markers (as an image) and use them — Massimo Rosin, May 10 '16 at 14:42

score 1 · Accepted Answer · answered May 11 '16 at 20:07

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>

Thanks Vadim, It worked. But red and green markups are gone after adding that attribute of 'directions'. It looks so dense over there. I need to maintain that as well. However I will accept your answer. — Ram, May 12 '16 at 06:40

score 0 · Answer 2 · answered May 10 '16 at 15:05

0

for 1) You can just add label="X"

answered May 10 '16 at 15:05

Karsten Vieth

1
3

Thanks Karsten, but where to add label="X". Plz suggest in my code. – Ram May 11 '16 at 07:13
Start
– Karsten Vieth May 18 '16 at 14:43
Unfortunately that (label="X") didn't work out. I wanna replace 'A' by "Start' and 'B' by 'End'. You can test http://plnkr.co/edit/YC2z4xH9ytdj0qc9w3lT?p=preview what you suggested. It's not working. – Ram Jun 25 '16 at 07:41

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

2 Answers2