jchaplin2 · December 14, 2017 21:56
diff --git a/gistfile1.txt b/gistfile1.txt
 <!DOCTYPE html>
 <html>
  <head>
      <title>Magic Towns of Mexico</title>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
      html,
      body {
        font-family: Arial, sans-serif;
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
 	<script>
 var initialPlaces = [
  {"city":"Tepotzotlán","lat":19.7185096,"lng":-99.2065202},
  {"city":"Valle de Bravo","lat":19.1950964,"lng":-100.1326725},
  {"city":"Cuitzeo","lat":19.9685057,"lng":-101.1406046},
  {"city":"Pátzcuaro","lat":19.5134498,"lng":-101.6091554},
  {"city":"Sta. Clara del Cobre","lat":19.4064279,"lng":-101.639697899999},
 ];

 var map, google;
 var markers = [];
 var wikiElem;

 var Place = function(data) {
    this.city = ko.observable(data.city);
    this.lat = ko.observable(data.lat);
    this.lng = ko.observable(data.lng);
 };

 var ViewModel = function() {
    var self = this;

    self.placeList = ko.observableArray([]);
    self.query = ko.observable(''),

    initialPlaces.forEach(function(placeLocation) {
      self.placeList.push( new Place(placeLocation));
    });
    self.currentPlace = ko.observable( this.placeList()[0]);

    // Populate infowindow
    this.populateInfoWindow = function(marker, infoWindow) {
      if (infoWindow.marker != marker) {
        infoWindow.marker = marker;
        var $wikiElem = '';
        var cityStr = marker.city;
        var wikiUrl = 'http://en.wikipedia.org/w/api.php?action=opensearch&search=' +
          cityStr + '&format=json&callback=wikiCallback';
        var wikiRequestTimeOut = setTimeout(function() {
          $wikiElem = 'failed to get wikipedia resources';
        }, 8000);

        $.ajax({
          url: wikiUrl,
          dataType: "jsonp",
          success: function(response) {
            var articleList = response[1];
            for (var i = 0; i < articleList.length; i++) {
              articleStr = articleList[i];
              var url = 'http://en.wikipedia.org/wiki/' + articleStr;
              $wikiElem += '<li><a href="' + url + '">' + articleStr + '</a></li>';
            }
            infoWindow.setContent(self.titleContent + '<hr>' + self.wikiTitle + $wikiElem);
            clearTimeout(wikiRequestTimeOut);
          }
        });
        self.wikiTitle = '<h3>Relevant Wikipedia Links</h3>';
        self.titleContent = '<div>' + marker.city + '<div>';
        infoWindow.open(map, marker);

        marker.setAnimation(google.maps.Animation.BOUNCE);
        setTimeout(function () {
          marker.setAnimation(null);
        }, 1500 );
        // Cleared infowindow if is closed
        infoWindow.addListener('closeclick', function() {
          infoWindow.marker = null;
        });
      }
    };

    // Handles click selection on map and list
    self.clickSelection = function() {
      self.populateInfoWindow(this, self.largeInfoWindow);
    };

    // Construct Map
    self.initMap = function() {
      map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: 24.3001235, lng: -102.2718002},
        zoom: 5,
      });

      self.largeInfoWindow = new google.maps.InfoWindow();
      // Create array for markers
      for (var i = 0; i < initialPlaces.length; i++) {
        this.city = initialPlaces[i].city;
        this.lat = initialPlaces[i].lat;
        this.lng = initialPlaces[i].lng;
        // create a marker per city
        this.marker = new google.maps.Marker({
          map: map,
          position: {lat: this.lat, lng: this.lng},
          city: this.city,
          icon: {
                path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
                scale: 5
              },
          animation: google.maps.Animation.DROP,
        });
        // Push the marker to our array of markers.
        this.markers.push(this.marker);
        this.marker.addListener('click', self.clickSelection);
      }

    };

    self.filteredPlaces = ko.computed(function() {
      if (!self.query()) {
        return self.placeList();
      } else {
        return self.placeList()
          .filter(place => place.city().toLowerCase().indexOf(self.query().toLowerCase()) > -1);
      }
    });

 };




 	</script>
  </head>
  <body>

 <div id="map"></div>
 <div class="menuContainer">
  <span class="center" style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776;</span>
  <div id="mySidenav" class="sidenav alignTextCenter">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
    <a href="#"><h1>Locations:</h1></a>
    <form role="search">
                    <input type="text" data-bind="value: query, valueUpdate: 'keyup'" placeholder="Search...">
    </form>
    <div data-bind='with: currentPlace' >
      <div data-bind='foreach: filteredPlaces' class="alignTextCenter">
        <p href="#" class="whiteFont" data-bind='text: city, click: clickSelection'></p>
      </div>
    </div>
  </div>
 </div>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?libraries=geometrykey=AIzaSyBnwbuI0b5q6p5sJAa2wcHIy2DGkZFisBY&v=3&callback=initMap">
    </script>
 <script>
 $(document).ready(function() {
    ko.applyBindings(ViewModel);
 });
 </script>
  </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Magic Towns of Mexico</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<style>
	html,
	body {
	font-family: Arial, sans-serif;
	height: 100%;
	margin: 0;
	padding: 0;
	}
	#map {
	height: 100%;
	}
	</style>
	<script>
	var initialPlaces = [
	{"city":"Tepotzotlán","lat":19.7185096,"lng":-99.2065202},
	{"city":"Valle de Bravo","lat":19.1950964,"lng":-100.1326725},
	{"city":"Cuitzeo","lat":19.9685057,"lng":-101.1406046},
	{"city":"Pátzcuaro","lat":19.5134498,"lng":-101.6091554},
	{"city":"Sta. Clara del Cobre","lat":19.4064279,"lng":-101.639697899999},
	];

	var map, google;
	var markers = [];
	var wikiElem;

	var Place = function(data) {
	this.city = ko.observable(data.city);
	this.lat = ko.observable(data.lat);
	this.lng = ko.observable(data.lng);
	};

	var ViewModel = function() {
	var self = this;

	self.placeList = ko.observableArray([]);
	self.query = ko.observable(''),

	initialPlaces.forEach(function(placeLocation) {
	self.placeList.push( new Place(placeLocation));
	});
	self.currentPlace = ko.observable( this.placeList()[0]);

	// Populate infowindow
	this.populateInfoWindow = function(marker, infoWindow) {
	if (infoWindow.marker != marker) {
	infoWindow.marker = marker;
	var $wikiElem = '';
	var cityStr = marker.city;
	var wikiUrl = 'http://en.wikipedia.org/w/api.php?action=opensearch&search=' +
	cityStr + '&format=json&callback=wikiCallback';
	var wikiRequestTimeOut = setTimeout(function() {
	$wikiElem = 'failed to get wikipedia resources';
	}, 8000);

	$.ajax({
	url: wikiUrl,
	dataType: "jsonp",
	success: function(response) {
	var articleList = response[1];
	for (var i = 0; i < articleList.length; i++) {
	articleStr = articleList[i];
	var url = 'http://en.wikipedia.org/wiki/' + articleStr;
	$wikiElem += '<li><a href="' + url + '">' + articleStr + '</a></li>';
	}
	infoWindow.setContent(self.titleContent + '<hr>' + self.wikiTitle + $wikiElem);
	clearTimeout(wikiRequestTimeOut);
	}
	});
	self.wikiTitle = '<h3>Relevant Wikipedia Links</h3>';
	self.titleContent = '<div>' + marker.city + '<div>';
	infoWindow.open(map, marker);

	marker.setAnimation(google.maps.Animation.BOUNCE);
	setTimeout(function () {
	marker.setAnimation(null);
	}, 1500 );
	// Cleared infowindow if is closed
	infoWindow.addListener('closeclick', function() {
	infoWindow.marker = null;
	});
	}
	};

	// Handles click selection on map and list
	self.clickSelection = function() {
	self.populateInfoWindow(this, self.largeInfoWindow);
	};

	// Construct Map
	self.initMap = function() {
	map = new google.maps.Map(document.getElementById('map'), {
	center: {lat: 24.3001235, lng: -102.2718002},
	zoom: 5,
	});

	self.largeInfoWindow = new google.maps.InfoWindow();
	// Create array for markers
	for (var i = 0; i < initialPlaces.length; i++) {
	this.city = initialPlaces[i].city;
	this.lat = initialPlaces[i].lat;
	this.lng = initialPlaces[i].lng;
	// create a marker per city
	this.marker = new google.maps.Marker({
	map: map,
	position: {lat: this.lat, lng: this.lng},
	city: this.city,
	icon: {
	path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
	scale: 5
	},
	animation: google.maps.Animation.DROP,
	});
	// Push the marker to our array of markers.
	this.markers.push(this.marker);
	this.marker.addListener('click', self.clickSelection);
	}

	};

	self.filteredPlaces = ko.computed(function() {
	if (!self.query()) {
	return self.placeList();
	} else {
	return self.placeList()
	.filter(place => place.city().toLowerCase().indexOf(self.query().toLowerCase()) > -1);
	}
	});

	};




	</script>
	</head>
	<body>

	<div id="map"></div>
	<div class="menuContainer">
	<span class="center" style="font-size:30px;cursor:pointer" onclick="openNav()">☰</span>
	<div id="mySidenav" class="sidenav alignTextCenter">
	<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
	<a href="#"><h1>Locations:</h1></a>
	<form role="search">
	<input type="text" data-bind="value: query, valueUpdate: 'keyup'" placeholder="Search...">
	</form>
	<div data-bind='with: currentPlace' >
	<div data-bind='foreach: filteredPlaces' class="alignTextCenter">
	<p href="#" class="whiteFont" data-bind='text: city, click: clickSelection'></p>
	</div>
	</div>
	</div>
	</div>
	<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
	<script async defer
	src="https://maps.googleapis.com/maps/api/js?libraries=geometrykey=AIzaSyBnwbuI0b5q6p5sJAa2wcHIy2DGkZFisBY&v=3&callback=initMap">
	</script>
	<script>
	$(document).ready(function() {
	ko.applyBindings(ViewModel);
	});
	</script>
	</body>
	</html>