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 >
< script >
function initialize() {
// 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();
if (places.length == 0) {
return;
}
place = places[0];
lat = place.geometry.location.lat();
lng = place.geometry.location.lng();
window.location = '/latlng/' + lat +","+lng;
console.log("lat:" + lat + " lng:" + lng);
});
}
< / 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-18 13:37:48 +00:00
<!-- <script>
2014-11-17 10:44:55 +00:00
(function() {
2014-11-17 17:25:37 +00:00
var default3words = 'spitting-ripple-fontanel';
2014-11-17 10:44:55 +00:00
var threewordsField = document.getElementById('input3words');
document.getElementById('button3words').addEventListener('click', function(evt) {
var threewords = threewordsField.value;
if (threewords.length === 0) {
threewords = default3words;
}
if (/\w+-\w+-\w+/.test(threewords)) {
window.location = '/' + threewords;
} else {
document.getElementById('input3wordsContainer').classList.add('has-error');
}
});
})();
2014-11-18 13:37:48 +00:00
< / script > -->
2014-11-17 10:44:55 +00:00
< / div >
< / body >
< / html >
