Autocomplete Api V3 google Automaticamente a todos los input del DOM

Las funciones de la biblioteca de JavaScript de Google Places permiten que una aplicación busque lugares (definidos en esta API como establecimientos, ubicaciones geográficas o puntos de interés destacados) incluidos en un área definida como, por ejemplo, los límites de un mapa o los alrededores de un punto fijo.

Debe tener en cuenta que para la utilización de esta api, es necesario la utilización de los mapas de Google o en su defecto adquirir una licencia con un proveedor de su país.

Ejemplo de la función:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Autocomplete Google Demo</title>
    <style>
        .textbox {
            border: 1px solid #DBE1EB;
            font-size: 18px;
            font-family: Arial, Verdana;
            padding-left: 7px;
            padding-right: 7px;
            padding-top: 10px;
            padding-bottom: 10px;
            border-radius: 4px;
            -moz-border-radius: 4px;
            -webkit-border-radius: 4px;
            -o-border-radius: 4px;
            background: #FFFFFF;
            background: linear-gradient(left, #FFFFFF, #F7F9FA);
            background: -moz-linear-gradient(left, #FFFFFF, #F7F9FA);
            background: -webkit-linear-gradient(left, #FFFFFF, #F7F9FA);
            background: -o-linear-gradient(left, #FFFFFF, #F7F9FA);
            color: #2E3133;
        }
        .textbox:focus {
            color: #2E3133;
            border-color: #FBFFAD;
        }
    </style>
</head>
<body>

    <input type="text" class="textbox">
    <input type="text" class="textbox">
    
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"></script>
    <script>
        (function(){

            var searchbox = document.getElementsByTagName("input");
            var autocomplete_options = {
                componentRestrictions: {
                    country: 'co'
                },
                location: new google.maps.LatLng(4.57523, -74.22116),
                radius: '60000',
                types: ['geocode', 'establishment']
            };    

            _(searchbox).each(function(value, key) {
                if (typeof value == 'object' && value != 'null' && value) {
                    var item = new google.maps.places.Autocomplete(value, autocomplete_options);
                    google.maps.event.addListener(item, 'place_changed', function(event) {
                        var currentPlace = item.getPlace();
                        if (currentPlace && currentPlace.geometry && currentPlace.place_id) {
                            console.log(currentPlace);
                        } else {
                            console.log("No results found, please try again.");
                        }
                    });
                }
            })
            
        })();
    </script>
</body>
</html>

En la imagen de la parte superior podemos observar que en la consola aparecen una serie de objetos javascript, los cuales tienen información del lugar (región o establecimiento) seleccionado, el cual nos es muy útil para representar información el el mapa o dentro de un infowindow.

Este se imprime gracias a un evento que se adicionó a la función auto completar de Google, el cual se activa cada vez que se selecciona un lugar diferente en el campo.