2014-11-17 10:44:55 +00:00
<!DOCTYPE html>
< html lang = "en" >
< head >
<!-- Meta -->
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
2014-11-17 16:11:28 +00:00
< title > These3Words Map< / title >
2014-11-17 10:44:55 +00:00
<!-- Style -->
< link rel = "stylesheet" href = "//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" >
2014-11-18 09:10:18 +00:00
< link rel = "stylesheet" href = "/static/css/style.css" >
2014-11-18 13:37:48 +00:00
< script src = "https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places" > < / script >
2014-11-18 14:40:05 +00:00
< script src = "/static/js/app.js" > < / script >
2014-11-17 10:44:55 +00:00
< / head >
2014-11-18 13:37:48 +00:00
< body onload = "initialize()" >
2014-11-17 10:44:55 +00:00
< div class = "container" >
% if err:
< aside class = "alert alert-danger" role = "alert" > Error: {{ err }}< / aside >
% end
< main class = "jumbotron" >
< h1 > These3Words Map< / h1 >
< p class = "lead" >
2014-11-17 13:45:04 +00:00
Find a location anywhere in the world identified by three simple words.
2014-11-17 10:44:55 +00:00
< / p >
2014-11-17 15:49:06 +00:00
< p class = "text-warning" > This is a very early pre-alpha release. Don't expect anything to work properly or reproducible. Especially since the underlying word-list will most likely change soon.< / p >
2014-11-17 10:44:55 +00:00
< p id = "input3wordsContainer" >
2014-11-17 17:25:37 +00:00
< input type = "text" class = "form-control" id = "input3words" placeholder = "spitting-ripple-fontanel" >
2014-11-17 10:44:55 +00:00
< / p >
< p >
< button id = "button3words" class = "btn btn-lg btn-primary" > Find on Map< / button >
< / p >
< / main >
2014-11-17 16:11:28 +00:00
< footer >
< p class = "text-center text-muted" > Made with ♥ by < a href = "https://betatim.github.io/" > Tim< / a > and < a href = "https://dun.gs" > Kevin< / a > . < a href = "https://github.com/betatim/these-3-words" > Fork it on GitHub< / a > .
< / footer >
2014-11-17 10:44:55 +00:00
< / div >
2014-11-18 14:40:05 +00:00
< script >
(function () {
var initialise = function () {
// Create the autocomplete object, restricting the search
// to geographical location types.
var searchbox = new google.maps.places.SearchBox(
(document.getElementById('input3words')));
// When the user selects an address from the dropdown,
// populate the address fields in the form.
google.maps.event.addListener(searchbox, 'places_changed', function() {
// Get the place details from the autocomplete object.
var places = searchbox.getPlaces();
console.log("HEllo");
if (places.length > 0) {
place = places[0];
These3Words.apiGetFromLatLng(place.geometry.location,
function(status, data) {
if (status >= 200 & & status < 400 ) {
window.location = "/" + data.three;
}
});
} else {
var words = document.getElementById('input3words').value;
if (/\w+-\w+-\w+/.test(words)) {
window.location = '/' + words;
}
}
});
};
window.addEventListener('load', initialise);
}());
< / script >
2014-11-17 10:44:55 +00:00
< / body >
< / html >
