Map not showing when $scope.mapMarkers defined (Step 7)

#1

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']);
#2

In the controller, you mustn't use {} to wrap the code that the instructions suggest you.

#3

Step 1, 2, 3, 4, 5, and 6 are correct in your code. Step 7 is when things went awry. By saying $scope.mapMarkers ={}, you create an object consisting of an array. As the instructions suggest, use $scope.mapMarkers =[]. I am a newbie to web development, but can you make an object containing arrays?

Incorrect: 

$scope.mapMarkers = {
  [
    {
      lat: 40.741389,
      lng: -74.003056,
      message: "111 Eighth Avenue"
    },
    {
      lat: 40.7425,
      lng: -74.006111,
      message: "Chelsea Market"
    }
	]};

Correct: $scope.mapMarkers=[ { lat: 40.741389, lng: -74.003056, message: "111 Eighth Avenue" }, { lat: 40.7425, lng: -74.006111, message: "Chelsea Market" } ];

The chrome console gave me this error which is a good tip off regarding where to hunt for an error: Uncaught SyntaxError: Unexpected token , MainController.js:15 .

#4

you have your brackets switched around...

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 Eight Avenue"
  },
  {
    lat: 40.7425,
    lng: -74.006111,
    message: "Chelsea Market"
   }
    ];
 
  
  
}]);