Stuck in step 4


#1

Hi everyone,
the map wont show.
I have gone over all the topics in the project and could not figure out why my code does not work.
please help me.

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/vendor/leaflet.js"></script>
    <script src="js/vendor/angular-leaflet-directive.min.js"></script>
  </body>
</html>

app.js

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

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" 
	}
  ];
  
}]);

#2

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