Skip to content

Instantly share code, notes, and snippets.

@kentbrew kentbrew/whatwhere.html
Last active Aug 29, 2015

Embed
What would you like to do?
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.