Attendize/public/vendor/geocomplete/examples/simple.html

59 lines
1.6 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title>$.geocomplete()</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<form>
<input id="geocomplete" type="text" placeholder="Type in an address" size="90" />
<input id="find" type="button" value="find" />
</form>
<div id="examples">
Examples:
<a href="#">Hamburg, Germany</a>
<a href="#">3rr0r</a>
<a href="#">Hauptstraße</a>
</div>
<pre id="logger">Log:</pre>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="../jquery.geocomplete.js"></script>
<script src="logger.js"></script>
<script>
$(function(){
$("#geocomplete").geocomplete()
.bind("geocode:result", function(event, result){
$.log("Result: " + result.formatted_address);
})
.bind("geocode:error", function(event, status){
$.log("ERROR: " + status);
})
.bind("geocode:multiple", function(event, results){
$.log("Multiple: " + results.length + " results found");
});
$("#find").click(function(){
$("#geocomplete").trigger("geocode");
});
$("#examples a").click(function(){
$("#geocomplete").val($(this).text()).trigger("geocode");
return false;
});
});
</script>
</body>
</html>