<<<<<<< HEAD

Address Auto Complete

Improve the user-experience of your forms by adding auto-complete functionality to your address fields, powered by Google Maps. Solodev has provided a turn-key form for you to use on your website or in your project.

Note

This example will not work unless you have a registered and active Google API key. To register a new key, visit Google's Get a Key/Authentication page.

Tutorial

For detailed instructions, view Solodev's Adding an Auto-Complete Address Form to your Website article.

Demo

Check out a working example on JSFiddle.

HTML

The form includes basic HTML markup:

<div class="container">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">Address</h3>
        </div>
        <div class="panel-body">
            <input id="autocomplete" placeholder="Enter your address" onFocus="geolocate()" type="text" class="form-control">
            <br>
            <div id="address">
                <div class="row">
                    <div class="col-md-6">
                        <label class="control-label">Street address</label>
                        <input class="form-control" id="street_number" disabled="true">
                    </div>
                    <div class="col-md-6">
                        <label class="control-label">Route</label>
                        <input class="form-control" id="route" disabled="true">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <label class="control-label">City</label>
                        <input class="form-control field" id="locality" disabled="true">
                    </div>
                    <div class="col-md-6"> 
                        <label class="control-label">State</label>
                        <input class="form-control" id="administrative_area_level_1" disabled="true">
                    </div>
                </div>
                <div class="row">
                     <div class="col-md-6">
                        <label class="control-label">Zip code</label>
                        <input class="form-control" id="postal_code" disabled="true">
                     </div>
                     <div class="col-md-6">
                        <label class="control-label">Country</label>
                        <input class="form-control" id="country" disabled="true">
                     </div>
                </div>
           </div>
        </div>
    </div>
</div>

CSS

CSS for this repository is primarily based on default Bootstrap classes.

JavaScript

Some basic validation is included in auto-complete.js. Further, the form requires a registered API key from Google Developers. Once your key is registered, copy it and replace in the following script:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initAutocomplete" async defer></script>

To register a new key, visit Google's Get a Key/Authentication page.

External Includes

The form includes the following third-party resources:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript"></script>

=======

wpcity

Repository name is wpcity . It contains all my necessary stuff .

73a7e1b09fca8636e5fd710c12018890111955fb