AngularJs-Google-Maps Markers not displaying

Question

I'm confused because the AngularJs and HTML code is near exact to a project where this works, but this is also my first time using LAMP instead of MEAN/MERN so maybe it's something to do with that?

my HTML file is:

<div ng-controller="map-controller">
  <ng-map center="35.5951,-82.5515" zoom="12" on-click="vm.placeCheckpoint(data)">

    <!-- Place marker for each checkpoint -->
    <marker id='{{checkpoint._id}}'
      ng-repeat="checkpoint in vm.checkpoints"
      position="{{checkpoint.position}}"
      on-click="vm.showDetail(checkpoint)"
      >
    </marker> <!-- this doesn't display -->

    <marker position="35.5951,-82.5515"></marker> <!--this displays -->

  </ng-map>
</div>

and map-controller.js is:

(function(window, angular, undefined) {
  angular.module('map')
  .controller('map-controller', ['NgMap', '$window', 'mapService',
    function(NgMap, $window, mapService) {

    var vm = this;
    // ==================== Map =====================================

    // Display map
    NgMap.getMap().then(function(map) {
      vm.map = map;
    });

    // Populate map with checkpoints
    mapService.getCheckpoints().then(function(data) {
      vm.checkpoints = data;
      console.log(vm.checkpoints); // logs as a list of objects
    });     


  }])
})(window, window.angular);

About the only differences between this the server, variable names, and that Google is making me use an API key for this whereas it wasn't requiring it for the other. They're both hitting the same API to get the data.

Also, if I try adding an directive, the map disappears.

Answer 1

First of all, make sure position property in vm.checkpoints array has the proper format [lat,lng], for example:

[
    {
        "name": "Oslo",
        "position" : [ 59.923043,10.752839 ]  
    },
    {
        "name": "Stockholm",
        "position" : [ 59.339025, 18.065818 ]  
    }
]

Secondly, vm.checkpoints is undefined in marker directive, you need to change expression ng-controller="map-controller" with ng-controller="map-controller as vm"

Example

(function (window, angular, undefined) {
    angular.module('map', ['ngMap'])


        .factory('mapService', function ($rootScope, $http) {
            var mapService = {
                getCheckpoints: function () {
                    return $http.get('https://rawgit.com/vgrem/a171e20cbe9915707e5b94c139105a65/raw/europe.json').then(function (response) {
                        return response.data;
                    });
                }
            }
            return mapService;
        })

        .controller('map-controller', ['NgMap', '$window', 'mapService',
            function (NgMap, $window, mapService) {
                var vm = this;
                vm.checkpoints = [];
                
                // Display map
                NgMap.getMap().then(function (map) {
                    vm.map = map;
                    
                });
                // Populate map with checkpoints
                mapService.getCheckpoints().then(function (data) {
                    vm.checkpoints = data.map(function(item, idx){
                           var position = [item.position.lat,item.position.lng];
                           item._id = idx;
                           item.position = position;
                           return item;
                    });
                    console.log(vm.checkpoints); // logs as a list of objects
                });

                vm.showDetail = function(){
                    console.log('clicked')
                }

            }])
})(window, window.angular);

<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>

<div ng-app="map" ng-controller="map-controller as vm">
  <ng-map center="48.1049441,4.1858258" zoom="4" >

    <marker 
      ng-repeat="checkpoint in vm.checkpoints"
      position="{{checkpoint.position}}"
      on-click="vm.showDetail(checkpoint)" >
    </marker> 

  </ng-map>
</div>