Usando formulario autocomplete

Integrando formulario Autocomplete con el AutocompleteService y PlacesService para seleccionar el primer elemento en caso de que no seleccione uno.

by Jorgelig

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places"></script>
<label for="searchTextField">Escribe una direccion:</label>
<br>
<input id="searchTextField" type="text" size="50">
<div>
    <ul id="events" style="background: #F5F5F5;"></ul>
</div>

JavaScript

var input = document.getElementById('searchTextField');
        var liTemplate = "<li>$event</li>";
        var options = {
            types: ["geocode"]
        }; //componentRestrictions: {country: 'us'}

        var autocomplete = new google.maps.places.Autocomplete(input, options);
        var autocmpleteService = new google.maps.places.AutocompleteService(null, options);
        var placeServices = new google.maps.places.PlacesService(document.createElement('div'));

        var placeSelected = {};

        insertEvent = function (text) {
            $("#events").append(liTemplate.replace("$event", text)).delay(10000).queue(function () {
                console.log("remove");
                var $li = $(this).find('li');
                console.log($li);
                $li.remove();
            });
        };

        google.maps.event.addListener(autocomplete, 'place_changed', function (evt) {
            console.log("place_changed");
            placeSelected = autocomplete.getPlace();
            var item = "place_changed: [" + placeSelected.formatted_address + "  (" + placeSelected.geometry.location.lat() + ',' + placeSelected.geometry.location.lng() + ")]";
            insertEvent(item);
        });

        $(input).on('click', function () {
            //            autocomplete = new google.maps.places.Autocomplete(input, options);
        })
            .on('keypress', function (evt) {
            console.log('keypress', placeSelected);
            placeSelected = null;
        })
            .on('blur', function (evt) {
            //            var place = autocomplete.getPlace();
            if (!placeSelected) {
                console.log("placeS: ", placeSelected);
                var text = $(input).val();
                console.log(text);
                if (!text) return false;
                autocmpleteService.getPlacePredictions({
                    input: text
                }, function (response, status) {
                    if...