startup-systems · ragodrich · Sep 27, 2016 · Sep 27, 2016
diff --git a/README.md b/README.md
@@ -1,33 +1,17 @@
-# Mashup project
+#Mashup project
 
-This project is open-ended!
+This project is open-ended! Requirements:
 
-* [AJAX demos](https://github.com/advanced-js/deck/tree/gh-pages/demos/ajax)
-* [inspiration?](http://www.programmableweb.com/mashups)
-
-## Requirements
-
-* Build a site that uses data from at least one external API in an interesting, interactive way. (**80%**)
-* HTML validation (using the [Nu HTML Checker](https://validator.w3.org/nu/)) must pass. (**10%**)
-* JavaScript linting (using the configured [JSHint](http://jshint.com/about/)) must pass. (**10%**)
+* Build a site that uses data from at least one external API in an interesting, interactive way.
 * Replace this README with a description of the project.
-
-### Extra credit
-
-Too easy?
-
-* Build in an [object-oriented](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript) way (**10%**)
-* Add fancy interactivity/animations (**10%**)
-
-If you do either of these, please let Aidan know so he can take a look.
-
-## Tips
-
-* The JS code should be **non-trivial**. That being said... start simple! (Just get the data to show up on the page.)
-* No server-side coding is required, but feel free to create a backend in whatever language if you like, if you need one.
 * You are welcome to use any 3rd-party libraries/frameworks – just load them from a CDN (e.g. [cdnjs](http://cdnjs.com)), or put them under the [`vendor/`](vendor/) folder.
 * **Do not commit the `client_secret` (or anything else from an API that says "token" or "secret")**, as a hacker could use this to make requests on behalf of you.
 
+The JS code should be **non-trivial**. That being said... start simple! (Just get the data to show up on the page.) No server-side coding is required, but feel free to create a backend in whatever language if you like, if you need one.
+
+* [AJAX demos](https://github.com/advanced-js/deck/tree/gh-pages/demos/ajax)
+* [inspiration?](http://www.programmableweb.com/mashups)
+
 ## Finding an API
 
 A couple things to look for in an API (or at least the endpoints you're using) for this project:
@@ -37,6 +21,11 @@ A couple things to look for in an API (or at least the endpoints you're using) f
 
 Here is a [list of API suggestions](https://gist.github.com/afeld/4952991).
 
+## Too easy?
+
+* build in an object-oriented way
+* add fancy interactivity/animations
+
 ## Running tests locally
 
 Within this repository directory in your [virtual machine](https://github.com/startup-systems/vm):
@@ -53,3 +42,6 @@ Within this repository directory in your [virtual machine](https://github.com/st
     ```bash
     npm test -s
     ```
+
+The following code calls on the Google Maps API to show various routes (by car) that can be taken from different selection of cities in Israel. Some of the cities that can be chosen are Tel-Aviv, Ashkelon, Jerusalem, etc. The program uses HTML and Javascript/JQuery to generate these routes.
+
diff --git a/index.html b/index.html
@@ -1,8 +1,89 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <title>Mashup</title>
-  </head>
-  <body>
-  </body>
+<head>
+	<meta charset="utf-8">
+	<title>Google Maps Directions in Israel</title>
+	<style>
+		html, body {
+			height: 100%;
+		}
+		#map {
+			height: 100%;
+		}
+		#float {
+			position: absolute;
+			left: 10%;
+			z-index: 5;
+			padding: 10px;
+			text-align: center;
+			font-family: 'Garamond','Helvetica';
+			line-height: 30px;
+			padding-left: 10px;
+		}
+	</style>
+</head>
+<body>
+	<div id="float">
+		<b>Start: </b>
+		<select id="start">
+			<option value="tel-aviv, israel">Tel-Aviv</option>
+			<option value="jerusalem, israel">Jerusalem</option>
+			<option value="Rishon LeTsiyon, Israel">Rishon LeTsiyon</option>
+			<option value="Ashkelon, israel">Ashkelon</option>
+			<option value="eilat, israel">Eilat</option>
+			<option value="Haifa, Israel">Haifa</option>
+			<option value="Daliyat al-Karmel">Daliyat al-Karmel</option>
+			<option value="Nazareth, israel">Nazareth</option>
+			<option value="Tiberias, Israel">Tiberias</option>
+		</select>
+		<b>End: </b>
+		<select id="end">
+			<option value="tel-aviv, israel">Tel-Aviv</option>
+			<option value="jerusalem, israel">Jerusalem</option>
+			<option value="Rishon LeTsiyon, Israel">Rishon LeTsiyon</option>
+			<option value="Ashkelon, israel">Ashkelon</option>
+			<option value="eilat, israel">Eilat</option>
+			<option value="Haifa, Israel">Haifa</option>
+			<option value="Daliyat al-Karmel">Daliyat al-Karmel</option>
+			<option value="Nazareth, israel">Nazareth</option>
+			<option value="Tiberias, Israel">Tiberias</option>
+		</select>
+	</div>
+	<div id="map"></div>
+	<script>
+		function initMap() {
+			var ds = new google.maps.DirectionsService();
+			var dd = new google.maps.DirectionsRenderer();
+			var map = new google.maps.Map( document.getElementById('map'), {
+				zoom: 7,
+				center: {lat: 31.0461, lng: 34.8516}
+			});
+			dd.setMap(map);
+
+			function route(ds, dd) {
+				ds.route({
+					origin: document.getElementById('start').value,
+					destination: document.getElementById('end').value,
+					travelMode: 'DRIVING'
+				}, function(response, status) {
+					if (status === 'OK') {
+						dd.setDirections(response);
+					} else {
+						window.alert(status);
+					}
+				});
+			}
+			var newRoute = function() {
+				route(ds, dd);
+			};
+			document.getElementById('start').addEventListener('change', newRoute);
+			document.getElementById('end').addEventListener('change', newRoute);
+
+		}
+	</script>
+	<script async defer
+	src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCEfKIjx-VtFiytxC1o9PWYgpUb52mMs6s&callback=initMap">
+</script>
+</body>
 </html>
+