Showing posts with label address. Show all posts
Showing posts with label address. Show all posts

Thursday, February 6, 2014

Place auto complete address form using google api and jQuery

Google api link || Live example || Download autocomplete-address-form.js

Example screen shots:
Html Code:

<!DOCTYPE html>
<html>
    <head>
        <title>Place Auto Complete Address Form</title>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <style>
            html, body, #map-canvas {
                height: 100%;
                margin: 0px;
                padding: 0px
        }
        </style>
        <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script src="autocomplete-address-form.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                app.autoCompleteAddress.initialize($(this).find("#html-body"));
            });
        </script>

        <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 style="padding-left: 50px; padding-top: 50px;" id="html-body">
        <div id="locationField">
            <input id="autocomplete" class="auto-complete-address"
                   placeholder="Enter your address" type="text"></input>
        </div>

        <table id="address">
            <tr>
                <td class="label">Street address</td>
                <td class="slimField"><input class="field" id="street_number"/></td>
                <td class="wideField" colspan="2"><input class="field" id="route"/></td>
            </tr>
            <tr>
                <td class="label">City</td>
                <td class="wideField" colspan="3"><input class="field" id="locality"/></td>
            </tr>
            <tr>
                <td class="label">State</td>
                <td class="slimField"><input class="field"/></td>
                <td class="label">Zip code</td>
                <td class="wideField"><input class="field" id="postal_code"/></td>
            </tr>
            <tr>
                <td class="label">Country</td>
                <td class="wideField" colspan="3"><input id="country" class="field"/></td>
            </tr>
            </tr>
                <td class="label">Other Address Type</td>
                <td class="wideField" colspan="3"><div id="otherType" class="field"></div></td>
            </tr>
        </table>
    </body>
</html>