Map Not Appearing - i feel like I'm taking crazy pills


#1

Resolved---
I'm leaving this post up for other people that may have the same issue. Ultimately the problem was that
<script src= 'js/services/places.js'></script>
wasn't working because my file hierarchy was structured incorrectly.


I've spent days trying to figure this out to no avail! In the words of Bonnie Tyler: I need a hero.

Here is the error my console is logging:
VM361 angular.min.js:
102 Error: [$injector:unpr] http://errors.angularjs.org/1.3.15/$injector/unpr?p0=placesProvider%20%3C-%20places%20%3C-%20MainController

------Index -----

<!doctype html>
<html>
  <head>
    <!-- Include Stylesheets -->
  <link href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet" />
    <link href="css/leaflet.css" rel="stylesheet" />
    <link href="css/main.css" rel="stylesheet" />
    <!-- Include Scripts -->
    <script src = 'js/vendor/angular.min.js'></script>
    <script src = 'js/vendor/leaflet.js'></script>
    <script src = 'js/vendor/angular-leaflet-directive.min.js'></script>
    <script src = 'js/vendor/helpers.js'></script> 

  </head>
  
  <body ng-app='NearMeApp'>

    <div class="header">
      <div class="container-fluid">
        <h1 class="pull-left">NearMe</h1>
      </div>
    </div>

    <div class="main" ng-controller='MainController'>
      <div class="container-fluid" id="map-canvas">
        <leaflet center = "mapCenter" markers = "mapMarkers"></leaflet>
      </div>
    </div>

    <!-- Modules -->
    <script src= 'js/app.js'></script>

    <!-- Controllers -->
    <script src= 'js/controllers/MainController.js'></script>

    <!-- Directives -->


    <!-- Services -->
    <script src= 'js/services/places.js'></script>
  </body>
</html>

----- app.js -----
var app = angular.module('NearMeApp', ['leaflet-directive']);

----- MainController.js -----
app.controller('MainController', ['$scope', 'places', function($scope, places) {

places.success(function(data) {
$scope.geodata = data;
$scope.mapMarkers = geodataToMarkers($scope.geodata);
});

$scope.mapCenter =
{
lat: 40.741934,
lng: -74.004897,
zoom: 17
};
}]);

----- places.js -----
app.factory('places', ['$http', function($http) {
return $http.jsonp('https://en.wikipedia.org/w/api.php?action=query&list=geosearch&gsradius=5000&gscoord=40.741934%7C-74.004897&gslimit=30&format=json&callback=JSON_CALLBACK')
.success(function(data) {
return data;
})
.error(function(err) {
return err;
});
}]);