Looking to customize ng-map markup to display "start" and "end" instead of "A" and "B."
Referenced this resource, but encountered issues displaying both "start" and "A" in the markup.
Noticing a discrepancy in the distance between the source and destination compared to the actual Google Map.
In summary, three questions arise:
1) Modify text in markup to show "start" instead of "A"
2) Address the distance inconsistency
3) How to trigger map display upon clicking the "Draw Map" button using AngularJS
Provided below is the code snippet.
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>