Angular Google Maps Polyline Coordinates from Database - angularjs

Question

I am trying to display a Polyline on an Ionic application using Angular Google Maps with coordinates from a database. I read the documentation on the Angular Google Maps site regarding getting the coordinates and attempting to create the path via the coordinates from an API. I tried using Angular.forEach to use checklat and checklong as my coordinates but it doesn't show anything on the map. How can I use the coordinates on the data below to display as a polyline?
Data from API:
_id "57393e042613d90300a35a0a"
tripstatus "1"
tripcreated "1463367863236"
tripdescription "testing one two three. i am ironman."
tripname "New trip to test user current trip"
__v 0
checks
0 checklat " 10.72403187357376"
checklong "122.53443290985284"
time "1463367863236"
_id "57394ae62613d90300a35a10"
1 checklat "10.724010661667863"
checklong "122.53442867631733"
time "1463367863236"
_id "57394b272613d90300a35a16"
2 checklat "10.6817828"
checklong "122.5389465"
time "1463367863236"
_id "57394c662613d90300a35a1a"
My Controller:
TripFac.getTrip(id).success(function(data) {
$scope.trips = data;
var latlng = data[0].checks;
angular.forEach(latlng, function(path) {
path = {
latitude: checklat,
longitude: checklong
}
});
$scope.latlng = latlng;
});
//Get Trip Points and put on polyline
$scope.polylines = [];
uiGmapGoogleMapApi.then(function(){
$scope.polylines = [
{
path: latlng,
stroke: {
color: '#6060FB',
weight: 3
},
geodesic: true,
visible: true,
icons: [{
icon: {
path: google.maps.SymbolPath.BACKWARD_OPEN_ARROW
},
offset: '25px',
repeat: '50px'
}]
}
];
});
My view:
<ui-gmap-google-map
center="map.center"
zoom="map.zoom"
id="wrapper">
<style>
.angular-google-map-container { height:450px; width:auto; }
</style>
<ui-gmap-polyline ng-repeat="p in polylines" path="p.path" stroke="p.stroke" visible='p.visible' geodesic='p.geodesic' fit="false" editable="p.editable" draggable="p.draggable" icons='p.icons'></ui-gmap-polyline>
</ui-gmap-google-map>

Answer 1

Foe example
$scope.map.center = {
latitude: $scope.latitude,
longitude: $scope.longitude
};
var directionsDisplay = new google.maps.DirectionsRenderer({
suppressMarkers: true
});
var directionsService = new google.maps.DirectionsService();
$scope.directions = {
origin: new google.maps.LatLng($scope.lat, $scope.lng),
destination: new google.maps.LatLng($scope.latitude, $scope.longitude),
showList: false
}
var request = {
origin: $scope.directions.origin,
destination: $scope.directions.destination,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status === google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
directionsDisplay.setMap($scope.map.control.getGMap());
} else {}
});

Answer 2

It could be related with one of the following reasons:
undefined latlng object is passed into $scope.polylines, needs to be changed to $scope.latlng
$scope.polylines could be initialized before json data is getting loaded
The following example demonstrates how to load data from external source and initialize a polygon(s) on the map:
angular.module('map-example', ['uiGmapgoogle-maps'])
.controller('MapController', function($scope, $http, uiGmapGoogleMapApi, uiGmapIsReady) {
$scope.map = {
zoom: 12,
bounds: {},
center: { latitude: 10.6817828, longitude: 122.53443290985284 }
};
var loadPathData = function() {
return $http.get('https://rawgit.com/vgrem/3fc4ffc90de778f38f09b671466001fa/raw/8da45ddf4b174d758892e8a6514fea9145f4b91b/data.json')
.then(function(res) {
//extract data
return res.data[0].checks.map(function(item) {
return {
latitude: item.checklat,
longitude: item.checklong
}
});
});
};
var drawPolylines = function(path) {
$scope.polylines = [
{
path: path,
stroke: {
color: '#6060FB',
weight: 3
},
geodesic: true,
visible: true,
icons: [{
icon: {
path: google.maps.SymbolPath.BACKWARD_OPEN_ARROW
},
offset: '25px',
repeat: '50px'
}]
}
];
}
uiGmapIsReady.promise()
.then(function(instances) {
loadPathData()
.then(drawPolylines);
});
});
.angular-google-map-container {
height: 450px;
width: auto;
}
<div ng-app="map-example" ng-controller="MapController">
<ui-gmap-google-map center="map.center" zoom="map.zoom" id="wrapper">
<ui-gmap-polyline ng-repeat="p in polylines" path="p.path" stroke="p.stroke" visible='p.visible' geodesic='p.geodesic' fit="false"
editable="p.editable" draggable="p.draggable" icons='p.icons'></ui-gmap-polyline>
</ui-gmap-google-map>
<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.0.1/lodash.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script src="http://cdn.rawgit.com/nmccready/angular-simple-logger/0.0.1/dist/index.js"></script>
<script src="http://cdn.rawgit.com/angular-ui/angular-google-maps/master/dist/angular-google-maps.min.js"></script>
</div>