fix: move `build directory to resources/shop`
This commit is contained in:
Valentin Lab
@@ -0,0 +1,37 @@
|
||||
# Google Place Autocomplete
|
||||
|
||||
This sample code show you how to quickly use the Places Autocomplete javascript
|
||||
API from Google.
|
||||
|
||||
[See demo right now](http://lewagon.github.io/google-place-autocomplete)
|
||||
|
||||
## Code
|
||||
|
||||
Look at the [index.html](index.html) file, you'll see a very standard form.
|
||||
The input with id `user_input_autocomplete_address` is very important as it
|
||||
is bound to an `autocomplete` object in the `autocomplete.js` code.
|
||||
|
||||
The code you see is not dependent on jQuery, also the `initializeAutocomplete`
|
||||
method has to be called when `google` is ready, not just when the DOM is ready.
|
||||
|
||||
## API Key
|
||||
|
||||
In order to get a lot of requests for free to the API, you need to create a
|
||||
new project under the [Google API Console](https://code.google.com/apis/console).
|
||||
For this project, enable the Google Maps Javascript API v3:
|
||||
|
||||
|
||||
|
||||
Then, for this project, create a new "Browser Key", the one you'll put in the
|
||||
`index.html` file when calling the `https://maps.googleapis.com/maps/api/js` script.
|
||||
|
||||
|
||||
|
||||
Make sure to specify referers so that **only you** can use this key! Remember,
|
||||
you API calls are limited per day.
|
||||
|
||||
|
||||
|
||||
## Documentation
|
||||
|
||||
[Full Reference](https://developers.google.com/maps/documentation/javascript/places-autocomplete)
|
||||
@@ -0,0 +1,27 @@
|
||||
function initializeAutocomplete(id) {
|
||||
var element = document.getElementById(id);
|
||||
if (element) {
|
||||
var autocomplete = new google.maps.places.Autocomplete(element, { types: ['geocode'] });
|
||||
google.maps.event.addListener(autocomplete, 'place_changed', onPlaceChanged);
|
||||
}
|
||||
}
|
||||
|
||||
function onPlaceChanged() {
|
||||
var place = this.getPlace();
|
||||
|
||||
// console.log(place); // Uncomment this line to view the full object returned by Google API.
|
||||
|
||||
for (var i in place.address_components) {
|
||||
var component = place.address_components[i];
|
||||
for (var j in component.types) { // Some types are ["country", "political"]
|
||||
var type_element = document.getElementById(component.types[j]);
|
||||
if (type_element) {
|
||||
type_element.value = component.long_name;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
google.maps.event.addDomListener(window, 'load', function() {
|
||||
initializeAutocomplete('user_input_autocomplete_address');
|
||||
});
|
||||
@@ -0,0 +1,83 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<title>Google Place Autocomplete</title>
|
||||
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm-8 col-sm-offset-2">
|
||||
<h1>Google Place Autocomplete exemple</h1>
|
||||
|
||||
<a href="https://github.com/lewagon/google-place-autocomplete">Source</a>
|
||||
<hr>
|
||||
|
||||
<form role="form" class="form-horizontal">
|
||||
<fieldset>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-4 control-label">Address</label>
|
||||
<div class="col-sm-8">
|
||||
<input id="user_input_autocomplete_address" name="user_input_autocomplete_address"
|
||||
class="form-control" placeholder="Start typing your address...">
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset class="disabled">
|
||||
<div class="form-group">
|
||||
<label class="col-sm-4 control-label"><code>street_number</code></label>
|
||||
<div class="col-sm-8">
|
||||
<input id="street_number" name="street_number" disabled="true" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-4 control-label"><code>route</code></label>
|
||||
<div class="col-sm-8">
|
||||
<input id="route" name="route" disabled="true" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-4 control-label"><code>locality</code></label>
|
||||
<div class="col-sm-8">
|
||||
<input id="locality" name="locality" disabled="true" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-4 control-label"><code>administrative_area_level_1</code></label>
|
||||
<div class="col-sm-8">
|
||||
<input id="administrative_area_level_1" name="administrative_area_level_1" disabled="true" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-4 control-label"><code>postal_code</code></label>
|
||||
<div class="col-sm-8">
|
||||
<input id="postal_code" name="postal_code" disabled="true" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-4 control-label"><code>country</code></label>
|
||||
<div class="col-sm-8">
|
||||
<input id="country" name="country" disabled="true" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Include Google Maps JS API -->
|
||||
<script type="text/javascript"
|
||||
src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyDANjx3bosEtIyzJaoWs50Wnt6nt_1rmxU "></script>
|
||||
|
||||
<!-- Custom JS code to bind to Autocomplete API -->
|
||||
<script type="text/javascript" src="autocomplete.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
Reference in New Issue
Block a user