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.
Comentarios
Publicar un comentario