startup-systems · roycboyc · Sep 26, 2016 · Sep 26, 2016 · Sep 26, 2016
diff --git a/README.md b/README.md
@@ -1,55 +1,2 @@
-# Mashup project
+I have created a global map that features the world's top documentary festivals, and allows you to find the one closest to you
 
-This project is open-ended!
-
-* [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%**)
-* 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.
-
-## Finding an API
-
-A couple things to look for in an API (or at least the endpoints you're using) for this project:
-
-* Make sure it doesn't require authentication/authorization (e.g. [OAuth](http://oauth.net/)) - at least for the endpoints that you want to use - so that you don't need a server.
-* If the API doesn't support cross-domain requests (JSONP or CORS), you will need to use [JSONProxy](https://jsonp.afeld.me/).
-
-Here is a [list of API suggestions](https://gist.github.com/afeld/4952991).
-
-## Running tests locally
-
-Within this repository directory in your [virtual machine](https://github.com/startup-systems/vm):
-
-1. [Install Node.js 6.x.](https://nodejs.org/en/download/package-manager/#debian-and-ubuntu-based-linux-distributions)
-1. Install the project dependencies.
-
-    ```bash
-    npm install
-    ```
-
-1. Run the tests.
-
-    ```bash
-    npm test -s
-    ```
diff --git a/index.html b/index.html
@@ -2,7 +2,101 @@
 <html>
   <head>
     <title>Mashup</title>
+    <meta name="viewport" content="initial-scale=1.0">
+    <meta charset="utf-8">
+    <style>
+      html, body {
+        height: 80%;
+        width:1000px;
+        margin: 0;
+        padding: 0;
+      }
+      #map {
+        height: 100%;
+      }
+    </style>
+
+	<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
+	<script type="text/javascript">
+		function update(){
+			var continent = document.getElementById("continent").value;
+			$.ajax({
+				dataType: 'text',
+				url: "https://maps.googleapis.com/maps/api/geocode/json?address="+continent+"&key=AIzaSyA8B8dfdYokkZEtY6T0Lr3QxiJWlDRPaYg",
+				type: "GET",
+				success: function (data) {
+					var result = JSON.parse(data);
+					var centerData=result.results.geometry[0];
+			},
+			});
+	}
+	</script>
   </head>
   <body>
+  	<h1>This is a list of the leading documentary film festivals right now</h1>
+  	<p>Drag the map to see festivals in the far edges of the universe</p>
+
+  	<form>
+	Enter Continent:<br>
+	<input type="text" name = "continent" id="continent"><br>
+	<input type="button" value="Submit" onclick="update()"/>
+	</form>
+    <div id="map"></div>
+    <script> 
+
+      function initMap() {
+          map = new google.maps.Map(document.getElementById('map'), {
+          center: {lat: 52.370216, lng: 4.895168},
+          zoom: 3
+        });
+        var markerAms = new google.maps.Marker({
+  			'position': {lat:52.370216, lng:4.895168},
+  			'map': map,
+  			'title': 'IDFA is a documentary-only festival that takes place in November'
+  		});
+
+  		var infoWindowTor = new google.maps.InfoWindow ({
+  			'content': "<h3> Toronto International Film Festival </h3>" +
+  			"TIFF is one of the largest publicly attended film festivals in the world,<br>"+
+  			"attracting over 480,000 people annually.<br>" +
+  			"<a href=https://www.tiff.net/>Visit the website </a>"
+		});  		
+  		var markerTor = new google.maps.Marker({
+  			'position': {lat:43.653226, lng:-79.383184},
+  			'map': map,
+  			'title': 'TIFF'
+  		});
+  		markerTor.addListener ('click', function() {
+  			infoWindowTor.open(map, markerTor);
+  		});
+  		var markerShef = new google.maps.Marker({
+  			'position': {lat:53.381129, lng:-1.470085},
+  			'map': map,
+  			'title': 'Sheffield Doc/Fest is a favorite among doc die-hard, a smallish June festival'
+  		});
+  		var markerAviv = new google.maps.Marker({
+  			'position': {lat:32.085300, lng:34.781768},
+  			'map': map,
+  			'title': 'DocAviv is emerging as an international staple in the industry. Runs in May.'
+  		});
+  		var markerNYC = new google.maps.Marker({
+  			'position': {lat:40.712784, lng:-74.005941},
+  			'map': map,
+  			'title': 'DOC NYC is the biggest doc festival in the United States. Runs in November. '
+  		});
+  		var markerAnt = new google.maps.Marker({
+  			'position': {lat:-33.868820, lng:151.209296},
+  			'map': map,
+  			'title': 'Antenna is a small but well respected doc festival in Sydney, which runs in October. '
+  		});
+  		var markerLis = new google.maps.Marker({
+  			'position': {lat:38.722252, lng:-9.139337},
+  			'map': map,
+  			'title': 'DocLisboa is a small December festival, but has a market that attracts commissioners and filmmakers. '
+  		});
+
+      }
+    </script>
+    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA8B8dfdYokkZEtY6T0Lr3QxiJWlDRPaYg&callback=initMap"></script>
   </body>
 </html>