Google Maps Autocomplete Address Test

Testing the ability to get addresses from a Google Maps autocomplete field.

by m4xout

HTML

<script type="text/javascript"
src="//maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyCrGaroYIOPAu9IakE6gEzY2sa5t23mCpQ&sensor=false"></script>
Enter a location: <input type="text" id="tb" />
<div id="place_details" style="display: none;">
<p>Street number: <span id="number"></span></p>
<p>Street name: <span id="street"></span></p>
<p>Suburb: <span id="suburb"></span></p>
<p>State: <span id="state"></span></p>
<p>Postcode: <span id="postcode"></span></p>
</div>
<div id="error" style="display: none;">Please select an Australian street address only.</div>

CSS

#tb {width: 300px;}
.pac-item { font-size: small; }
#place_details, #error {
    padding: 10px;
    background: #FFFED1;
    border: 2px dotted black;
}
#error {
    background: #E3ACBA;
}
#place_details p {
    clear: both;
    width: 400px;
    font-weight: bold;
}

#place_details p span {
    display: block;
    width: 250px;
    float: right;
    font-weight: normal;
}

JavaScript

var tb = document.getElementById('tb');
// initialise address autocomplete, biased towards Australian addresses.
var ac = new google.maps.places.Autocomplete(tb, {
    bounds: new google.maps.LatLngBounds(new google.maps.LatLng(-44.0, 112.8, true), new google.maps.LatLng(-10.1, 154.0, true)),
    types: ['geocode']
});
google.maps.event.addListener(ac, 'place_changed', function() {
    var place = ac.getPlace(),
        add, isAussieAddress;
    if (place) {
        isAussieAddress = place.types.length && place.types[0] == 'street_address' && ac.getBounds().contains(place.geometry.location);
        if (isAussieAddress) {
            add = getAddressFromPlace(place);
            console.log(place, add);
            $('#error').hide();
        } else {
            $('#place_details').hide();
            $('#error').effect('slide');
            $('#tb').val('');
        }
    }
    if (add) {
        $('#number').text(add.number);
        $('#street').text(add.street);
        $('#suburb').text(add.suburb);
        $('#state').text(add.state.full + ' (a.k.a. ' + add.state.abbrev + ')');
        $('#postcode').text(add.postcode);
        $('#place_details').effect('slide');
    } else {
        $('#place_details').effect('blind');
        $('#error').fadeIn('fast');
        $('#tb').val('');
    }
});

function getAddressFromPlace(place) {
    var add = place.address_components;
    var len = add.length;
    if (len < 6) return null;
    return {
        number: add[0].long_name + (len == 7 ? '/' + add[1].long_name : ''),
        street: add[len - 5].long_name,
        suburb: add[len - 4].long_name,
        state: {
            full: add[len - 3].long_name,
            abbrev: add[len - 3].short_name
        },
        country: add[len - 2].long_name,
        postcode: add[len - 1].long_name
    };
}