I am using angular-google-map for my application. I manage to get my current location and my desired location to go. My problem now is I wanted to show the direction between this two location. Please guide me on how to implement the direction. Below is my code.
location-map-ctrl.js
(function () {
'use strict';
angular.module('eliteApp').controller('LocationMapCtrl', ['$stateParams', 'eliteApi', LocationMapCtrl]);
function LocationMapCtrl($stateParams, eliteApi) {
var vm = this;
vm.location_id = Number($stateParams.id);
vm.map = {
center: {
latitude: 38.897677,
longitude: -77.036530,
},
zoom: 12,
control: { },
};
vm.marker = { },
eliteApi.getLeagueData().then(function(data){
vm.location = _.find(data.locations, { id: vm.location_id });
vm.marker = {
latitude: vm.location.latitude,
longitude: vm.location.longitude,
title: vm.location.name + "<br/>(Tap for directions)",
showWindow: true
};
vm.map.center.latitude = vm.location.latitude;
vm.map.center.longitude = vm.location.longitude;
} );
vm.locationClicked = function(marker){
navigator.geolocation.getCurrentPosition(function(pos) {
// vm.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
}, function(error) {
alert('Unable to get location: ' + error.message);
});
};
};
})();
location-map.html
<ion-view title="{{vm.location.name}}" ng-controller="LocationMapCtrl as vm">
<ion-content class="has-header">
<google-map draggable="true" center="vm.map.center" zoom="vm.map.zoom">
<marker coords="vm.marker" click="vm.locationClicked(vm.marker)">
<marker-label content="vm.marker.title" anchor="10 -8" class="marker-labels"></marker-label>
</marker>
</google-map>
</ion-content>
</ion-view>
Following is code to show route between two points on map.
HTML CODE
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content ng-controller="locationController">
<div id="googleMap" style="width:100%;height:380px;" name="googleMap"></div>
</ion-content>
</ion-pane>
</body>
JS CODE
var exampleApp=angular.module('starter', ['ionic'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
});
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize()
{
directionsDisplay = new google.maps.DirectionsRenderer();
var inticor= new google.maps.LatLng("Your Lat Long here");
var mapOptions =
{
zoom: 9,
center: inticor,
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
map = new google.maps.Map(document.getElementById('googleMap'), mapOptions);
directionsDisplay.setMap(map);
calcRoute();
};
google.maps.event.addDomListener(window, 'load', initialize);
function calcRoute() {
var start = "your start latlng here";
var end = "your destinationl latlng here";
var request = {
origin:start,
destination:end,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
This code will load the map, and as per you start and end latlong set route on map.
Remember to intialize value to variable inticor,start and end