Map Markers Not Showing Up


#1



https://www.codecademy.com/courses/learn-angularjs/projects/angularjs_nearme-2

When viewing the website in step 5 of NearMe 2, the map shows however the new map markers do not. What am i doing wrong.


Index.html

<!doctype html>
<html>
  <head>
    <link href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet" />
    <link href="css/leaflet.css" rel="stylesheet" />
    <script src="js/vendor/angular.min.js"></script>
    <script src="js/vendor/leaflet.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 -->
    <script src="js/vendor/angular-leaflet-directive.min.js"></script> 

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

js/services/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;
  });
}]);

js/controllers/MainController.js

app.controller('MainController', ['$scope', 'places', function($scope, places){
  
  $scope.mapCenter = { 
    lat: 40.741934, 
    lng: -74.004897, 
    zoom: 17 
  };
  places.success = (function(data){
    $scope.geodata = data;
    $scope.mapMarkers = geodataToMarkers($scope.geodata);
    });
}]);

#2

Not sure what step this is introduced, or if it is provided, but my code has this in the head, right after the angular.min.js.

<script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>

#3

I added it, and it did nothing, plus wouldnt that code just be redundant since both that code and the angular.min.js code both call the angualr script?


#4

Not redundant at all. A dependency. The latter would load first so it is present when the extension is loaded. The extension is depending upon the framework being there, thus a dependent.


#5

gottcha, but still even after adding that into my index it still does not work


#6

any other possible advice?


#7

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.