kentbrew/whatwhere.html

## whatwhere.html
<!doctype html>
<html>
  <head>
    <title>What / Where</title>
    <meta charset="UTF-8">
    <style>
      body {
        font-family: Verdana;
        text-align: center;
      }
      iframe {
        display: none!important;
      }
      .hidden {
        display: none!important;
      }
      img#map {
        position: absolute;
        top: 0;
        right: 0;
        border-radius: 3px;
        box-shadow: 0 0 10px 000;
      }
      div#main {
        position: relative;
        width: 700px;
        text-align: left;
        margin: 0 auto;
      }
      div#output {
        position: relative;
      }
      ul#results {
        width: 300px;
        list-style: none;
        padding: 0;
      }
      ul#results li {
        white-space: nowrap;
      }
      p#hd {
        text-align: center;
      }
      input {
        width: 300px;
      }
      input, button {
        font-size: 18px;
      }
      a {
        display: block;
        cursor: pointer;
      }
      a:hover {
        color: blue;
      }
      a.selected {
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <div id="main">
      <h1>What/Where</h2>
      <p id="hd">
        <input placeholder="what" id="what" />
        <input placeholder="where" id="where" />
        <button id="go">Search</button>
      </p>
      <div id="output">
        <ul id="results"></ul>
        <img id="map" class="hidden" />
      </div>
    </div>
    <script>

      // draw the map
      var map = function (a) {
        // latitude
        var lat = a.getAttribute('data-lat');
        // longitude
        var lon = a.getAttribute('data-lon');
        // address, so we can draw the marker
        var address = a.title;
        // get the image where we're going to draw the map
        var map = document.getElementById('map');
        // set the image source to Google Maps with the right latitude, longitude, and address
        map.src = 'https://maps.googleapis.com/maps/api/staticmap?center=' + lat + ',' + lon + '&zoom=15&size=400x400&markers=size:mid%7Ccolor:red%7C' + encodeURIComponent(address);
        // show the map
        map.className = '';
      };

      // when someone clicks a link, show the map
      var select = function (a) {
        // deselect the current selection
        var links = document.getElementsByTagName('A');

        // go through all the links on the page
        // remove className, which can only be "selected"
        for (var i = 0, n = links.length; i < n; i = i + 1) {
          links[i].className = '';
        }

        // select the new one
        a.className = 'selected';

        // call our map-drawing function
        map(a);
      };


      // do stuff with data when it comes back
      var render = function (reply) {

        // blank out the existing results
        var results = document.getElementById('results');
        results.innerHTML = '';

        // do we have results?
        if (reply.query && reply.query.results && reply.query.results.Result) {
          var data = reply.query.results.Result;

          // go through all results and make a list item (LI) with a link (A) for each
          for (var i = 0; i < data.length; i = i + 1) {
            var li = document.createElement('LI');
            var a = document.createElement('A');

            // set the title
            a.innerHTML = data[i].Title;

            // set latitude, longitude, and address so we can draw the map later
            a.setAttribute('data-lat', data[i].Latitude);
            a.setAttribute('data-lon', data[i].Longitude);
            a.title = data[i].Address + ' ' + data[i].City;
            a.href = data[i].Url;
            a.target = '_vu';

            // if somebody clicks this one, draw the map
            a.onmouseover = function () {
              select(this);
            };

            // add it to the list item
            li.appendChild(a);

            // add the list item to the list
            results.appendChild(li);

            // if this is the very first one, go ahead and draw the map
            if (!i) {
              select(a);
            }
          }
        } else {
          // show the error
          var li = document.createElement('LI');
          li.innerHTML = 'Got nothing, sorry!';
          results.appendChild(li);
        }
      };

      // ask YQL for data
      var getData = function (what, where) {
        var call = document.createElement('SCRIPT');
        call.src = 'https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20local.search%20where%20query%3D%22' + what + '%22%20and%20location%3D%22' + where + '%22&format=json&diagnostics=true&callback=render';
        document.body.appendChild(call);
      };

      // if someone clicks Go, check that you have a target and a location, and then ask for data
      var go = document.getElementById('go');

      go.onclick = function () {
        // find the what and where input boxes and get their values
        var what = document.getElementById('what').value;
        var where = document.getElementById('where').value;

        // do we know what to look for and where to look for it?
        if (what && where) {
          // go get some data!
          getData(what, where);
        } else {
          // pop an alert box with an error message
          alert('Need to know what to look for and where to look for it, please!');
        }
      };

    </script>
  </body>
</html>
	<!doctype html>
	<html>
	<head>
	<title>What / Where</title>
	<meta charset="UTF-8">
	<style>
	body {
	font-family: Verdana;
	text-align: center;
	}
	iframe {
	display: none!important;
	}
	.hidden {
	display: none!important;
	}
	img#map {
	position: absolute;
	top: 0;
	right: 0;
	border-radius: 3px;
	box-shadow: 0 0 10px 000;
	}
	div#main {
	position: relative;
	width: 700px;
	text-align: left;
	margin: 0 auto;
	}
	div#output {
	position: relative;
	}
	ul#results {
	width: 300px;
	list-style: none;
	padding: 0;
	}
	ul#results li {
	white-space: nowrap;
	}
	p#hd {
	text-align: center;
	}
	input {
	width: 300px;
	}
	input, button {
	font-size: 18px;
	}
	a {
	display: block;
	cursor: pointer;
	}
	a:hover {
	color: blue;
	}
	a.selected {
	font-weight: bold;
	}
	</style>
	</head>
	<body>
	<div id="main">
	<h1>What/Where</h2>
	<p id="hd">
	<input placeholder="what" id="what" />
	<input placeholder="where" id="where" />
	<button id="go">Search</button>
	</p>
	<div id="output">
	<ul id="results"></ul>
	<img id="map" class="hidden" />
	</div>
	</div>
	<script>

	// draw the map
	var map = function (a) {
	// latitude
	var lat = a.getAttribute('data-lat');
	// longitude
	var lon = a.getAttribute('data-lon');
	// address, so we can draw the marker
	var address = a.title;
	// get the image where we're going to draw the map
	var map = document.getElementById('map');
	// set the image source to Google Maps with the right latitude, longitude, and address
	map.src = 'https://maps.googleapis.com/maps/api/staticmap?center=' + lat + ',' + lon + '&zoom=15&size=400x400&markers=size:mid%7Ccolor:red%7C' + encodeURIComponent(address);
	// show the map
	map.className = '';
	};

	// when someone clicks a link, show the map
	var select = function (a) {
	// deselect the current selection
	var links = document.getElementsByTagName('A');

	// go through all the links on the page
	// remove className, which can only be "selected"
	for (var i = 0, n = links.length; i < n; i = i + 1) {
	links[i].className = '';
	}

	// select the new one
	a.className = 'selected';

	// call our map-drawing function
	map(a);
	};


	// do stuff with data when it comes back
	var render = function (reply) {

	// blank out the existing results
	var results = document.getElementById('results');
	results.innerHTML = '';

	// do we have results?
	if (reply.query && reply.query.results && reply.query.results.Result) {
	var data = reply.query.results.Result;

	// go through all results and make a list item (LI) with a link (A) for each
	for (var i = 0; i < data.length; i = i + 1) {
	var li = document.createElement('LI');
	var a = document.createElement('A');

	// set the title
	a.innerHTML = data[i].Title;

	// set latitude, longitude, and address so we can draw the map later
	a.setAttribute('data-lat', data[i].Latitude);
	a.setAttribute('data-lon', data[i].Longitude);
	a.title = data[i].Address + ' ' + data[i].City;
	a.href = data[i].Url;
	a.target = '_vu';

	// if somebody clicks this one, draw the map
	a.onmouseover = function () {
	select(this);
	};

	// add it to the list item
	li.appendChild(a);

	// add the list item to the list
	results.appendChild(li);

	// if this is the very first one, go ahead and draw the map
	if (!i) {
	select(a);
	}
	}
	} else {
	// show the error
	var li = document.createElement('LI');
	li.innerHTML = 'Got nothing, sorry!';
	results.appendChild(li);
	}
	};

	// ask YQL for data
	var getData = function (what, where) {
	var call = document.createElement('SCRIPT');
	call.src = 'https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20local.search%20where%20query%3D%22' + what + '%22%20and%20location%3D%22' + where + '%22&format=json&diagnostics=true&callback=render';
	document.body.appendChild(call);
	};

	// if someone clicks Go, check that you have a target and a location, and then ask for data
	var go = document.getElementById('go');

	go.onclick = function () {
	// find the what and where input boxes and get their values
	var what = document.getElementById('what').value;
	var where = document.getElementById('where').value;

	// do we know what to look for and where to look for it?
	if (what && where) {
	// go get some data!
	getData(what, where);
	} else {
	// pop an alert box with an error message
	alert('Need to know what to look for and where to look for it, please!');
	}
	};

	</script>
	</body>
	</html>