Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: [u]nsigned en 26 Junio 2012, 16:02 pm


Título: Google Maps Autcomplete
Publicado por: [u]nsigned en 26 Junio 2012, 16:02 pm
Hola, queria saber si alguien sabe como usar el autocompletado (de direcciones) de Google Maps. Eh estado bscando en google, pero no hay info muy clara...y me preguntaba si alguien ya ah trabajado con esto.

Lo que quiero es que un textinput con direcciones de mi ciudad tenga autocompletado con la API de GM.

Saludos y gracias por leer!!

Título: Re: Google Maps Autcomplete
Publicado por: robe007 en 26 Junio 2012, 19:56 pm
Por supuesto que sí se puede. El API 3 de Google maps lo permite.

Documentación: http://code.google.com/apis/maps/documentation/javascript/reference.html#Autocomplete

Ejemplo: http://code.google.com/apis/maps/documentation/javascript/examples/places-autocomplete.html

Saludos ...

Título: Re: Google Maps Autcomplete
Publicado por: [u]nsigned en 26 Junio 2012, 21:38 pm
Gracias por responder.

Eh estado leyendo la documentacion, pero no logro que solo me devuelva direcciones de mi ciudad. alguien podria darme un ejemplo sencillito?  :D

Saludos!!

Título: Re: Google Maps Autcomplete
Publicado por: [u]nsigned en 27 Junio 2012, 16:30 pm
Bueno, tengo el siguiente codigo:

Código
  3. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  4. <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
  5. <script type="text/javascript">
  6. $(function(){
  7. 	//Cargar Mapa
  8. 	var latlng = new google.maps.LatLng(-43.3021264, -65.0968286);
  9. 	var myOptions = {
  10. 		zoom: 13,
  11. 		center: latlng,
  12. 		mapTypeId: google.maps.MapTypeId.ROADMAP,
  13. 		disableDefaultUI:true,
  14. 		disableDoubleClickZoom:true,
  15. 		navigationControl:true
  16. 	};
  17. 	var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  18. 	var input = document.getElementById('calle');
  19.     var autocomplete = new google.maps.places.Autocomplete(input);
  20.     autocomplete.bindTo('bounds', map);
  21. 	var infowindow = new google.maps.InfoWindow();
  22.  
  23. 	var marker = new google.maps.Marker({
  24. 		map: map
  25. 	});
  26.  
  27.  
  28. 	/**/
  29. 	google.maps.event.addListener(autocomplete, 'place_changed', function() {
  30. 		infowindow.close();
  31. 		var place = autocomplete.getPlace();
  32. 		if (place.geometry.viewport) {
  33. 		map.fitBounds(place.geometry.viewport);
  34. 		} else {
  35. 		map.setCenter(place.geometry.location);
  36. 		map.setZoom(15);  // Why 17? Because it looks good.
  37. 		}
  38.  
  39. 		var image = new google.maps.MarkerImage(
  40. 		place.icon,
  41. 		new google.maps.Size(71, 71),
  42. 		new google.maps.Point(0, 0),
  43. 		new google.maps.Point(17, 34),
  44. 		new google.maps.Size(35, 35));
  45. 		marker.setIcon(image);
  46. 		marker.setPosition(place.geometry.location);
  47.  
  48. 		var address = '';
  49. 		if (place.address_components) {
  50. 			address = [(place.address_components[0] &&
  51. 				place.address_components[0].short_name || ''),
  52. 				(place.address_components[1] &&
  53. 				place.address_components[1].short_name || ''),
  54. 				(place.address_components[2] &&
  55. 				place.address_components[2].short_name || '')
  56. 			].join(' ');
  57. 		}
  58.  
  59. 		infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
  60. 		infowindow.open(map, marker);
  61. 	});
  62. 	/**/
  63.  
  64. });
  66. </head>
  68. <input type="text" id="calle" placeholder="Direccion" size="60" />
  69. <div id="map_canvas" style="width:500px;height:400px"></div>
  70. </body>
  71. </html>
  72.  

Funciona. Pero lo que no logro (mejor dicho no tengo ni p**a idea de como hacerlo) es limitar las sugerencias solo a direcciones de mi ciudad (Rawson, Chubut, Argentina).

Alguien podria ayudarme?

Saludos

Título: Re: Google Maps Autcomplete
Publicado por: [u]nsigned en 28 Junio 2012, 00:34 am
Nadie?

Entre tantos usuarios y nadie ah usado esta API antes?  :P

Saludos!!!

Título: Re: Google Maps Autcomplete
Publicado por: Graphixx en 28 Junio 2012, 06:07 am
podria ser un machetazo pero y si cuando haces la peticion a la api, le concatenas a la cadena que ingrese el usuario, la palabra con la ciudad desde donde esta este consultando, por defecto podrias usar la tuya, pero seria interesante usar una libreria de ip global para detectar la ciudad de la persona por defecto y concatenar esta a sus busquedas.

Título: Re: Google Maps Autcomplete
Publicado por: [u]nsigned en 28 Junio 2012, 13:29 pm
Cita de: Graphixx en 28 Junio 2012, 06:07 am
podria ser un machetazo pero y si cuando haces la peticion a la api, le concatenas a la cadena que ingrese el usuario, la palabra con la ciudad desde donde esta este consultando, por defecto podrias usar la tuya, pero seria interesante usar una libreria de ip global para detectar la ciudad de la persona por defecto y concatenar esta a sus busquedas.

Habia pensando en eso. el problema es que no se 'realiza una llamada' sino que a la funcion autocomplete de la api se le pasa como parametro el campo input al cual se le quiere aplicar el autocompletado, por lo que no creo que eso sea posibles.

Gracias por la sugerecia igual :)

Saludos!!!

Título: Re: Google Maps Autcomplete
Publicado por: Graphixx en 28 Junio 2012, 16:46 pm
Si se puede intercepta la comunicacion entre el formulario y la api con una libreria tipo request, que es como un POST Dinamico
http://www.ingeniero.moralesm.name/tag/request/

haces el POST a travez de request y asi si podras concatenarle parametros al input antes de que salga en el envio hacia la api.

Título: Re: Google Maps Autcomplete
Publicado por: Graphixx en 28 Junio 2012, 16:59 pm
Ya revise el codigo mejor, yo lo mas factible que veo es que te tocaria sumar a esa libreria de mapas, una de identificacion del usuario, que lea mediante su ip automaticamente su posicion latitud-longitud fijate aca:
http://foro.elhacker.net/php/super_contador_de_visitas_en_php300mb_sql4_millones_de_registrosscripts-t315327.0.html

seria ya despues de detectar con la ip de la persona que cargue la pagina, su latitud y longitud de esa base de datos, y mandarle esa informacion a la funcion javascript:
var latlng = new google.maps.LatLng(-43.3021264, -65.0968286);

Título: Re: Google Maps Autcomplete
Publicado por: Graphixx en 28 Junio 2012, 17:03 pm
Va olvidalo tampoco funciona parando el mapa en una latitud y longitud especificas, igual sigue buscando globalmente.
(http://img215.imageshack.us/img215/9682/autocompletegooglemaps.jpg)

Título: Re: Google Maps Autcomplete
Publicado por: Graphixx en 28 Junio 2012, 17:06 pm
Ya encontre la solucion, aunque es un poco machetera, tocaria alojar el script: jquery.autocomplete_geomod.js
localmente junto con el vuestro, y cambiar en la linea 355:

var _query = lastWord(term);
to:
var _query = lastWord(term) + 'Australia';

Fuente:
http://code.google.com/p/geo-autocomplete/issues/detail?id=1

Si pones en google:
set filter autocomplete googlemap api

salen muchos mas ejemplos de como filtrarlo.

Título: Re: Google Maps Autcomplete
Publicado por: [u]nsigned en 28 Junio 2012, 17:40 pm
Muchisimas gracias por tu ayuda Graphixx, Voy a ver esto que me dices y luego te cuento!!

Saludos!!!  ;-)


Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines