Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <title>Place Autocomplete Address Form</title>
- <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
- <meta charset="utf-8">
- <style>
- html, body {
- height: 100%;
- margin: 0;
- padding: 0;
- }
- #map {
- height: 100%;
- }
- </style>
- <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
- <style>
- #locationField, #controls {
- position: relative;
- width: 480px;
- }
- #autocomplete {
- position: absolute;
- top: 0px;
- left: 0px;
- width: 99%;
- }
- .label {
- text-align: right;
- font-weight: bold;
- width: 100px;
- color: #303030;
- }
- #address {
- border: 1px solid #000090;
- background-color: #f0f0ff;
- width: 480px;
- padding-right: 2px;
- }
- #address td {
- font-size: 10pt;
- }
- .field {
- width: 99%;
- }
- .slimField {
- width: 80px;
- }
- .wideField {
- width: 200px;
- }
- #locationField {
- height: 20px;
- margin-bottom: 2px;
- }
- </style>
- </head>
- <body>
- <div id="locationField">
- <input id="autocomplete" placeholder="Enter your address" onFocus="geolocate()" type="text" />
- </div>
- <form name="address" action="get_distance.php" method="POST">
- <table id="address">
- <tr>
- <td class="label">Street address</td>
- <td class="slimField"><input class="field" name="street_number" id="street_number" disabled="true" /></td>
- <td class="wideField" colspan="2"><input class="field" name="street_name" id="route" disabled="true" /></td>
- </tr>
- <tr>
- <td class="label">City</td>
- <td class="wideField" colspan="3"><input class="field" name="city" id="locality" disabled="true" /></td>
- </tr>
- <tr>
- <td class="label">State</td>
- <td class="slimField"><input class="field" id="administrative_area_level_1" disabled="true"></input></td>
- <td class="label">Zip code</td>
- <td class="wideField"><input class="field" id="postal_code" disabled="true" /></td>
- </tr>
- <tr>
- <td class="label">Country</td>
- <td class="wideField" colspan="3"><input class="field" id="country" disabled="true" /></td>
- </tr>
- <tr>
- <td class="label">others1</td>
- <td class="wideField" colspan="3"><input class="field" id="sublocality" disabled="true" /></td>
- </tr>
- <tr>
- <td class="label">others2</td>
- <td class="wideField" colspan="3"><input class="field" id="administrative_area_level_2" disabled="true" /></td>
- </tr>
- </table>
- <input type="submit" name="submit" value="continue" />
- </form>
- <script>
- // This example displays an address form, using the autocomplete feature
- // of the Google Places API to help users fill in the information.
- var placeSearch, autocomplete;
- var componentForm = {
- street_number: 'short_name',
- route: 'long_name',
- locality: 'long_name',
- administrative_area_level_1: 'long_name',
- country: 'long_name',
- postal_code: 'short_name',
- sublocality: 'long_name',
- administrative_area_level_2: 'long_name'
- };
- function initAutocomplete() {
- // Create the autocomplete object, restricting the search to geographical
- // location types.
- autocomplete = new google.maps.places.Autocomplete(
- /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),
- {types: ['geocode']});
- // When the user selects an address from the dropdown, populate the address
- // fields in the form.
- autocomplete.addListener('place_changed', fillInAddress);
- }
- // [START region_fillform]
- function fillInAddress() {
- // Get the place details from the autocomplete object.
- var place = autocomplete.getPlace();
- for (var component in componentForm) {
- document.getElementById(component).value = '';
- document.getElementById(component).disabled = false;
- }
- // Get each component of the address from the place details
- // and fill the corresponding field on the form.
- // console.log(place.address_components);
- console.log(place.address_components);
- for (var i = 0; i < place.address_components.length; i++) {
- var addressType = place.address_components[i].types[0];
- if (componentForm[addressType]) {
- var val = place.address_components[i][componentForm[addressType]];
- document.getElementById(addressType).value = val;
- }
- }
- }
- // [END region_fillform]
- // [START region_geolocation]
- // Bias the autocomplete object to the user's geographical location,
- // as supplied by the browser's 'navigator.geolocation' object.
- function geolocate() {
- if (navigator.geolocation) {
- navigator.geolocation.getCurrentPosition(function(position) {
- var geolocation = {
- lat: position.coords.latitude,
- lng: position.coords.longitude
- };
- var circle = new google.maps.Circle({
- center: geolocation,
- radius: position.coords.accuracy
- });
- autocomplete.setBounds(circle.getBounds());
- });
- }
- }
- // [END region_geolocation]
- </script>
- <script src="https://maps.googleapis.com/maps/api/js?key=__api_key__&libraries=places&language=en&callback=initAutocomplete"
- async defer></script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement