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 14:46:56 +00:00
< body >
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-18 15:05:44 +00:00
< p class = "text-warning" > This is hot off the press. We are still
finalising the word list so locations might not be
reproducible. So do not use it to mark the location of your
antarctic resupply drop quite yet!< / p >
2014-11-17 10:44:55 +00:00
< p id = "input3wordsContainer" >
2014-11-18 15:05:44 +00:00
< input type = "text" class = "form-control" id = "input3words" placeholder = "Your address OR opulent-crusade-zaar" >
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 >
