JS: set address elements to proper values without clicking autocomplete

StackOverflow https://stackoverflow.com/questions/21252856

Question

I'm trying to use Google Places Autocomplete for faster address entry which was featured in this blog : http://googlegeodevelopers.blogspot.com/2012/05/faster-address-entry-with-google-places.html

I'm trying to seperate each element of the address(street number, route, locality, country etc.) and used them for conditional purposes. The picture below will explain the rest.enter image description here

As you can see the values are not available in scenario 2 meaning comparison is not possible,how can I make scenario 1 always possible without relying on the user to click autocomplete?

CODE:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&libraries=places"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
    var placeSearch, autocomplete;
    var component_form = {
        'street_number': 'short_name',
            'route': 'long_name',
            'locality': 'long_name',
            'administrative_area_level_1': 'short_name',
            'country': 'long_name',
            'postal_code': 'short_name'
    };

    function initialize() {
        autocomplete = new google.maps.places.Autocomplete(document.getElementById('autocomplete'), {
            types: ['geocode']
        });
        google.maps.event.addListener(autocomplete, 'place_changed', function() {
            fillInAddress();
        });
    }

    function fillInAddress() {
        var place = autocomplete.getPlace();

        for (var component in component_form) {
            document.getElementById(component).value = "";
            document.getElementById(component).disabled = false;
        }

        for (var j = 0; j < place.address_components.length; j++) {
            var att = place.address_components[j].types[0];
            if (component_form[att]) {
                var val = place.address_components[j][component_form[att]];
                document.getElementById(att).value = val;
            }
        }
    }

    function geolocate() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
                var geolocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                autocomplete.setBounds(new google.maps.LatLngBounds(geolocation, geolocation));
            });
        }
    }

    $(document).ready(function() {

        $('#setVal').on('click', function() {
            document.getElementById('formatted_address').value = document.getElementById('autocomplete').value;
        });

    });
</script>

<body onload="initialize()">
    <div id="locationField">
        <input id="autocomplete" placeholder="Enter Address Here" onFocus="geolocate()" type="text" size="45"></input>
    </div>
    <div>Street address</div>
    <input id="street_number" disabled="true"></input>
    <input id="route" disabled="true"></input>
    <div>City</div>
    <input id="locality" disabled="true"></input>
    <div>State</div>
    <input id="administrative_area_level_1" disabled="true"></input>
    <div>Zip code</div>
    <input id="postal_code" disabled="true"></input>
    <div>Country</div>
    <input id="country" disabled="true"></input>
Was it helpful?

Solution

I don't think this is possible using Google Places Autocomplete because Google does not provide any event callback hook when you receive places results from the server such as "result_received" or "data_received". I only find place_changed event hook, nothing else.

I think if you want to achieve you goal, you need to make your own autocomplete list by using https://developers.google.com/places/documentation/search#TextSearchRequests

  1. You can make Ajax Call to the server like the following whenever user enter a text(onkeyup event) to the following url.

    https://maps.googleapis.com/maps/api/place/textsearch/xml?query=TEXT&sensor=fasle&key=AddYourOwnKeyHere

  2. you will get the response from the sever, which would be like this, https://developers.google.com/places/documentation/search#PlaceSearchResponses

  3. Then using those response, you build jQuery autocomplete list and catch user response. If the response has only ONE result, then you fill up the form automatically without waiting for user click event.

However, my question to you is "Worth It?" to make more code like this to save users' click?

I would rather go for UX approach by;

  1. Show 'Enter address and select the most matching one' message at the beginning
  2. When user selects an address, the proper address will show instead of the #1 message.
  3. When user reenter the address, the #1 message shows again until select one.

OTHER TIPS

First you need to decide when you think the user is done entering a potentially valid address. For example you could listen for the onchange event in the text entry, and consider any text longer than ~5 characters potentially valid, in case they entered just a zipcode.

Then after they make a potentially valid string, you can get the value of the text field and make a call to the Geocoder Service which will attempt to geocode the string and return all the values you need to fill out the form.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top