Ir al contenido principal

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.
Etiquetas:

Comentarios

Publicar un comentario

Entradas populares de este blog

Guardar datos en Postgre desde Java

Saludos amigos en esta oportunidad estableceremos conexion con postgre, para realizar la insercion de datos, primero que todo crearemos las variables de la conexion: String driver = "org.postgresql.Driver" ; String ruta = "jdbc:postgresql://localhost:5432/ nombre de la bd " ; String user = "postgres" ; String password = " clave "; Importante: El driver de Postgre para Java lo puedes descargar desde aqui: Driver PostgreSQL para explicar algo que es fundamental sobre la base de datos Ejemplo es que esta tiene tres (3) campos que son: codusuarios : de tipo biginteger serial (lo quiere decir que es un campo auto incremento en postgre). nombre : de tipo text. identificacion : de tipo text . Ahora seguimos con el codigo para insertar datos. Esta es la funcion correspondiente:   public void GuardarUsuario ( String nombre, String identificacion){         / / Insertar datos a la bd:           try{             Class.forName( d
20 comentarios
Leer más

Fireworks CS3 portable

Para que hagas los logos, botones e imagenes para tus aplicaciones facil y rapido... ¿Qué es Fireworks? Adobe Fireworks es una aplicación en forma de estudio (basada en la forma de estudio de Adobe Flash ), pero con más parecido a un taller destinado para el manejo híbrido de gráficos vectoriales con Gráficos en mapa de bits y que ofrece un ambiente eficiente tanto para la creación rápida de prototipos de sitios Web e interfaces de usuario, como para la creación y Optimización de Imágenes para web. Originalmente fue desarrollado por Macromedia , compañía que fue comprada en 2005 por Adobe Systems . Fireworks está disponible de forma individual o integrado en Adobe CS3/CS4/CS5 y por tanto ha sido diseñado para integrarse con otros productos de Adobe, como Dreamweaver y Flash . Integración con Adobe Flash La integración con Adobe Flash se ha ido reduciendo paulatinamente desde que Flash, en su versión 7, integró la herramienta PolyStar que hace un polígono
Publicar un comentario
Leer más

Pasar de una ventana a otra en java

Hola a todos en esta oportunidad estamos postiando algo que cuando empezamos con java es muy necesario y es como pasar de una ventana a otra, ya sea JDialog o JFrame; creados en tiempo de ejecucion o en aplicaciones de escritorio: Para llamar a un JDialog:        JDialog1 dialogo = new JDialog1 ( this , true );        dialogo . show (); y para cerrar un JDialogo de una plicacion de escritorio se puede utilizar:        dispose (); Para llamar a un JFrame:        JFrame1 frame = new JFrame1 ();        frame . show (); Para cerrar un JFrame de una plicacion de escritorio:                 dispose ();   o tambien: System. exit (0); y si se contruye a partir de la clase JFrame se coloca el siguiente codigo en la parte publica del documento:       setDefaultCloseOperation ( EXIT_ON_CLOSE ); Espero los siguientes ejemplos les sean de mucha ayuda... Deja tu comentario o agradecimiento.
7 comentarios
Leer más