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>

No comments:

Post a Comment