Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
196 lines (188 sloc) 6.01 KB
<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery AddressPicker ByGiro demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<script src="js/jquery-1.8.2.min.js"></script>
<!-- <script src="js/bootstrap-typeahead.js"></script> -->
<!-- <script src="js/bootstrap.min.js"></script> -->
<script src="../dist/jquery.addressPickerByGiro.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false&language=en"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="../dist/jquery.addressPickerByGiro.css" rel="stylesheet" media="screen">
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
.sidebar-nav {
padding: 9px 0;
}
.map {
height: 300px;
}
.map img {
max-width: none;
}
@media (max-width: 767px) {
.affix {
position: static;
}
}
@media (min-width: 768px) and (max-width: 979px) {
.form-horizontal .control-label {
width: 80px;
}
.form-horizontal .controls {
margin-left: 100px;
}
}
.typeahead.dropdown-menu {
z-index: 1002;
}
/* fix gmap */
.gm-style img {
max-width: none;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="row-fluid">
<h1>jQuery plugin: AddressPicker ByGiro</h1>
<p>It needs jQuery, full bootstrap library OR just typeahead bootstrap plugin</p>
<form autocomplete="off" class="form-horizontal">
<div class="row-fluid">
<div class="span6">
<div class="row-fluid">
<label class="control-label" for="inputAddress">Address</label>
<div class="controls">
<input type="text" class="inputAddress input-xxlarge" value="474 Locksley Bay, Winnipeg, MB R2K 2Y6, Canada" autocomplete="off" placeholder="Type in your address">
</div>
</div>
</div>
<div class="span6">
<div class="control-group">
<label class="control-label">Formatted address</label>
<div class="controls">
<input type="text" class="formatted_address input-xxlarge" disabled="disabled">
</div>
</div>
<div class="control-group">
<label class="control-label">Country</label>
<div class="controls">
<input type="text" class="country" disabled="disabled">
</div>
</div>
<div class="control-group">
<label class="control-label">Country code</label>
<div class="controls">
<input type="text" class="country_code" disabled="disabled">
</div>
</div>
<div class="control-group">
<label class="control-label">Region</label>
<div class="controls">
<input type="text" class="region" disabled="disabled">
</div>
</div>
<div class="control-group">
<label class="control-label">Region code</label>
<div class="controls">
<input type="text" class="region_code" disabled="disabled">
</div>
</div>
<div class="control-group">
<label class="control-label">county</label>
<div class="controls">
<input type="text" class="county" disabled="disabled">
</div>
</div>
<div class="control-group">
<label class="control-label">county code</label>
<div class="controls">
<input type="text" class="county_code" disabled="disabled">
</div>
</div>
<div class="control-group">
<label class="control-label">city</label>
<div class="controls">
<input type="text" class="city" disabled="disabled">
</div>
</div>
<div class="control-group">
<label class="control-label">city district</label>
<div class="controls">
<input type="text" class="city_district" disabled="disabled">
</div>
</div>
<div class="control-group">
<label class="control-label">zip</label>
<div class="controls">
<input type="text" class="zip" disabled="disabled">
</div>
</div>
<div class="control-group">
<label class="control-label">street</label>
<div class="controls">
<input type="text" class="street" disabled="disabled">
</div>
</div>
<div class="control-group">
<label class="control-label">street number</label>
<div class="controls">
<input type="text" class="street_number" disabled="disabled">
</div>
</div>
<div class="control-group">
<label class="control-label">latitude</label>
<div class="controls">
<input type="text" class="latitude" disabled="disabled">
</div>
</div>
<div class="control-group">
<label class="control-label">longitude</label>
<div class="controls">
<input type="text" class="longitude" disabled="disabled">
</div>
</div>
<div class="control-group">
<label class="control-label">radius</label>
<div class="controls">
<input type="text" class="radius" disabled="disabled">
</div>
</div>
</div>
</div>
</form>
</div><!--/span-->
<script>
$('.inputAddress').addressPickerByGiro({
distanceWidget: true,
boundElements: {
'country': '.country',
'country_code': '.country_code',
'region': '.region',
'region_code': '.region_code',
'county': '.county',
'county_code': '.county_code',
'city': '.city',
'city_district': '.city_district',
'street': '.street',
'street_number': '.street_number',
'zip': '.zip',
'latitude': '.latitude',
'longitude': '.longitude',
'formatted_address': '.formatted_address',
'radius': '.radius'
}
});
</script>
</div><!--/span-->
</div><!--/row-->
</div><!--/.fluid-container-->
</body>
</html>