Hello everyone!
I’m having trouble finishing the NearMe2, and in the end, I cannot get the map to show once I finish all the steps. Here is my code, hopefully someone will know how to solve this issue…
Is there something wrong with my code? Has anyone else been able to correctly finish this problem and how the map markers?
Thank you for your help!
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/angular-leaflet-directive.min.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/helpers.js"></script>
<!-- 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) {
$scope.apps = []
$scope.mapCenter = {
lat: 40.741934,
lng: -74.004897,
zoom: 17
}
function($scope, places) {
places.success(function(data) {
$scope.geodata = data;
$scope.mapMarkers = geodataToMarkers($scope.geodata);
});
}]);
Service 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(data) {
return data;
});
}]);