ch19: added dealers map (/dealers).

Author: EthanRBrown

ch19/handlers/dealers.js

@@ -0,0 +1,5 @@
+var credentials = require('../credentials.js');
+
+exports.home = function(req, res) {
+	res.render('dealers', { googleApiKey: credentials.googleApiKey });
+}; 

ch19/less/main.less

@@ -1,3 +1,8 @@
 body {
 	background-image: static("/img/background.png");
 }
+
+.dealers #map {
+    width: 100%;
+    height: 400px;
+}

ch19/routes.js

@@ -5,7 +5,8 @@ var main = require('./handlers/main.js'),
 	cartValidation = require('./lib/cartValidation.js');
 	contact = require('./handlers/contact.js'),
 	samples = require('./handlers/sample.js'),
-	customerController = require('./controllers/customer.js');
+	customerController = require('./controllers/customer.js'),
+	dealers = require('./handlers/dealers.js');
 
 module.exports = function(app){
 
@@ -50,6 +51,9 @@ module.exports = function(app){
 	app.get('/data/nursery-rhyme', samples.nurseryRhymeData);
 	app.get('/epic-fail', samples.epicFail);
 
+	// dealers
+	app.get('/dealers', dealers.home);
+
 	// customer routes
 	customerController.registerRoutes(app);
 

ch19/views/dealers.handlebars

@@ -0,0 +1,64 @@
+<script src="https://maps.googleapis.com/maps/api/js?key={{googleApiKey}}&sensor=false"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.min.js"></script>
+
+<script id="dealerTemplate" type="text/x-handlebars-template">
+    \{{#each dealers}}
+        <div class="dealer">
+            <h3>\{{name}}</h3>
+            \{{address1}}<br>
+            \{{#if address2}}\{{address2}}<br>\{{/if}}
+            \{{city}}, \{{state}} \{{zip}}<br>
+            \{{#if country}}\{{country}}<br>\{{/if}}
+            \{{#if phone}}\{{phone}}<br>\{{/if}}
+            \{{#if website}}<a href="{{website}}">\{{website}}</a><br>\{{/if}}
+        </div>
+    \{{/each}}
+</script>
+
+<div class="dealers">
+    <div id="map"></div>
+    <div id="dealerList"></div>
+</div>
+
+{{#section 'jquery'}}
+	<script>
+		var map;
+		var dealerTemplate = Handlebars.compile($('#dealerTemplate').html());
+		$(document).ready(function(){
+
+			// center map on US, set zoom to show whole country
+			var mapOptions = {
+				center: new google.maps.LatLng(38.2562, -96.0650),
+				zoom: 4,
+			};
+
+			// initialize map
+			map = new google.maps.Map(
+				document.getElementById('map'),
+				mapOptions);
+
+			// fetch JSON
+			$.getJSON('/dealers.json', function(dealers){
+
+				// add markers on map for each dealer
+				dealers.forEach(function(dealer){
+					// skip any dealers without geocoding
+					if(!dealer.lat || !dealer.lng) return;
+					var pos = new google.maps.LatLng(dealer.lat, dealer.lng);
+					var marker = new google.maps.Marker({
+						position: pos,
+						map: map,
+						title: dealer.name
+					});
+				});
+
+				// update dealer list using Handlebars
+				$('#dealerList').html(dealerTemplate({ dealers: dealers }));
+
+			});
+
+		});
+	</script>
+{{/section}}
+
+