Add FAQ section

Author: nlaplante

app/index.html

@@ -53,6 +53,7 @@
     			<li ng-class="{'active': $location.path() == '/'}"><a href="/" rel="start">Home</a></li>
 	    		<li ng-class="{'active': $location.path() == '/use'}"><a href="/use" rel="help">Quickstart</a></li>
 	    		<li ng-class="{'active': $location.path() == '/api'}"><a href="/api" rel="help">API documentation</a></li>
+                <li ng-class="{'active': $location.path() == '/faq'}"><a href="/faq" rel="help">FAQ</a></li>
 	    		<li ng-class="{'active': $location.path() == '/demo'}"><a href="/demo" rel="help">Demo</a></li>	    		
 	    		<li class="dropdown">
 	    			<a href="#" class="dropdown-toggle" data-toggle="dropdown">Developer resources <b class="caret"></b></a>
@@ -107,6 +108,7 @@
     <script src="scripts/module.js"></script>
     <script src="scripts/controllers/main.js"></script>
     <script src="scripts/controllers/use.js"></script>
+    <script src="scripts/controllers/faq.js"></script>
     <script src="scripts/controllers/api.js"></script>
     <script src="scripts/controllers/demo.js"></script>
     <script src="scripts/controllers/headlines.js"></script>    

app/scripts/app.js

@@ -5,7 +5,7 @@ angular.module('angularGoogleMapsApp')
   .config(function ($routeProvider, $locationProvider, $logProvider, $githubProvider, analyticsProvider) {
 
   	$locationProvider.html5Mode(true).hashPrefix('!');
-  	$logProvider.debugEnabled(false);  	
+  	$logProvider.debugEnabled(true);  	
 
   	$githubProvider.username('nlaplante')
   		.repository('angular-google-maps')
@@ -30,28 +30,32 @@ angular.module('angularGoogleMapsApp')
       	templateUrl: 'views/demo.html',
       	controller: 'DemoCtrl'
       })
+      .when('/faq', {
+        templateUrl: 'views/faq.html',
+        controller: 'FAQCtrl'
+      })
       .when('/not-found', {
-		templateUrl: 'views/404.html',
-		controller: 'NotFoundCtrl'
+		    templateUrl: 'views/404.html',
+		    controller: 'NotFoundCtrl'
       })
       .otherwise({
         redirectTo: function (params, path, search) {
         	return '/not-found?url=' + path;
         }
       });
   })
-  .run(function ($rootScope, $log, $location, analytics) {
+  .run(function ($rootScope, $log, $location) {
 
   	$rootScope.$location = $location;
 
-	$rootScope.$on('$viewContentLoaded', function (e, current, previous) {
-		// refresh add this if needed
-		addthis.toolbox('.addthis_toolbox');
-		addthis.update('.addthis_toolbox');
-	});
+    $rootScope.$on('$viewContentLoaded', function (e, current, previous) {
+		  // refresh add this if needed
+		  addthis.toolbox('.addthis_toolbox');
+		  addthis.update('.addthis_toolbox');
+    });
 
-	$rootScope.$on('$routeChangeError', function (e, current, previous, rejection) {
-		$log.error('could not change route', rejection);
-	});
+    $rootScope.$on('$routeChangeError', function (e, current, previous, rejection) {
+		  $log.error('could not change route', rejection);
+    });
 
   });

app/scripts/controllers/faq.js

@@ -0,0 +1,5 @@
+'use strict';
+
+angular.module('angularGoogleMapsApp')
+  .controller('FAQCtrl', function ($scope) {
+  });

app/views/faq.html

@@ -0,0 +1,54 @@
+<h1 class="page-header">FAQ</h1>
+
+<p>Here are the most frequently asked questions about this library from the issue tracker and the Google+ community. You can suggest an addition to this list by opening an issue in the issue tracker.</p>
+
+<ul>
+	<li><a href="#faq-map-instance">How do I access the map instance?</a></li>
+	<li><a href="#faq-map-height">Can I dynamically set the map height?</a></li>
+</ul>
+
+<h3 id="faq-map-instance">How do I access the map instance?</h3>
+
+<p>It is possible to access the map instance using the <code>tilesloaded</code> event:</p>
+
+<ul class="nav nav-tabs">
+	<li class="active"><a href="" data-target="#faq-map-instance-tab-html" data-toggle="tab">HTML</a></li>
+	<li><a href="" data-target="#faq-map-instance-tab-script" data-toggle="tab">Script</a></li>	
+</ul>
+
+<div class="tab-content">
+	<div id="faq-map-instance-tab-html" class="tab-pane active">
+		<pre>&lt;google-map events="map.events" ...&gt;&lt;/google-map&gt;</pre>
+	</div>
+	<div id="faq-map-instance-tab-script" class="tab-pane">
+		<pre>$scope.map = {
+	events: {
+		tilesloaded: function (map) {
+			$log.info('this is the map instance', map);
+		}
+	}
+}</pre>
+	</div>
+</div>
+
+<h3 id="faq-map-height">Can I dynamically set the map height?</h3>
+
+<p>The map's height can be set either statically using CSS or dynamically:</p>
+
+<ul class="nav nav-tabs">
+	<li class="active"><a href="" data-target="#faq-map-height-tab-html" data-toggle="tab">HTML</a></li>
+	<li><a href="" data-target="#faq-map-height-tab-script" data-toggle="tab">Script</a></li>
+</ul>
+
+<div class="tab-content">
+	<div id="faq-map-height-tab-html" class="tab-pane active">
+		<pre>&lt;google-map id="my-map" ... &gt;&lt;/google-map&gt;</pre>
+	</div>
+	<div id="faq-map-height-tab-script" class="tab-pane">
+		<p>Let's assume we include the map in an <code>ng-view</code> block:</p>
+		<pre>$scope.$on('$viewContentLoaded', function () {
+	var mapHeight = 500; // or any other calculated value
+	$("#my-map .angular-google-map-container").height(mapHeight);
+});</pre>
+	</div>
+</div>