Hi everyone!
On step 7 of the sample problem:
I’m able to get the map to show when I only have $scope.mapCenter defined in my MainController.js. The map will show zoomed into West 16th Street on Long Island.
However, when I add $scope.mapMarkers the map doesn’t show at all. Just a blank screen with the title-bar “Near Me”.
I don’t know if this is a bug? Or 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!
My MainController.js
app.controller('MainController', ['$scope', function($scope){
$scope.mapCenter = {
lat: 40.741934,
lng: -74.004897,
zoom: 17
};
$scope.mapMarkers = {
[
{
lat: 40.741389,
lng: -74.003056,
message: "111 Eighth Avenue"
},
{
lat: 40.7425,
lng: -74.006111,
message: "Chelsea Market"
}
]};
}]);
My 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 -->
<!-- Services -->
<script src="js/services/places.js"></script>
</body>
</html>
My app.js
var app = angular.module('NearMeApp', ['leaflet-directive']);