ngMap directive not displaying the location coordinates taken from service file

Question

I am trying to call location coordinates from service file and display in google map view. But for some reason the data binding is not working, and there are no errors and the controller is calling the object from service.

I think there is some mistake in my map template, but I'm not able to find out what it is. Can some please help me with this issue? Thank you.

The codes are as follows:

map template

<div class="panel6 panel-primary">
    <div class="panel-heading">Truck's Location</div>
    <div class="panel-body">
        <ng-map zoom="11" center="[49.8994, -97.1392]">
            <marker position="[{{maploc.longitude}}, {{maploc.latitude}}]" />
            <shape name="circle" center="[{{maploc.longitude}}, {{maploc.latitude}}]" radius="4000" />
            <control name="overviewMap" opened="true" />
        </ng-map>
        </div>
   </div>

---

service file

"use strict";

angular.module("fleetListModule").service("fleetsService",

       function () {
           this.getTrucks = function () {
               return trucks;
           };

           var trucks = [
               {
                   "iD": "1",
                   "status": "Running",
                   "destination": "WPG",
                   "alerts": "Nothing",
                       "longitude": "49.8994",
                       "latitude": "-98.1392"
               }
           ];

       });

---

controller

"use strict";

angular.module("fleetMapModule").controller("fleetMapController",
    ['$scope', 'fleetsService',
function ($scope, fleetsService) {

    $scope.$on('obtainMapLocation', function (event, map) {
        var fleetMapLocs = fleetsService.getTrucks();
        for (var i = 0; i < fleetMapLocs.length; i++) {
            var fleetMapLoc = fleetMapLocs[i];
            if (fleetMapLoc.iD == map.id) {
                $scope.maploc = fleetMapLoc;
                break;

            }
        }
    });

}]);

Answer 1

Check this plunker it is working. And if you set default values for $scope.maploc you will see marker. But the problem is in if statement that is always false.

if (fleetMapLoc.iD == map.id)