elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Guía rápida para descarga de herramientas gratuitas de seguridad y desinfección


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Google Maps Autcomplete		0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] 2 Ir Abajo Respuesta Imprimir
Autor Tema: Google Maps Autcomplete  (Leído 7,304 veces)
[u]nsigned


Desconectado Desconectado

Mensajes: 2.397

JS/Node developer


Ver Perfil WWW
Google Maps Autcomplete
« 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!!
En línea
No hay atajo ante la duda, el misterio se hace aquí...
Se hace carne en cada uno, el misterio es existir!
robe007

Desconectado Desconectado

Mensajes: 15


Ver Perfil
Re: Google Maps Autcomplete
« Respuesta #1 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 ...
En línea
[u]nsigned


Desconectado Desconectado

Mensajes: 2.397

JS/Node developer


Ver Perfil WWW
Re: Google Maps Autcomplete
« Respuesta #2 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!!
En línea
No hay atajo ante la duda, el misterio se hace aquí...
Se hace carne en cada uno, el misterio es existir!
[u]nsigned


Desconectado Desconectado

Mensajes: 2.397

JS/Node developer


Ver Perfil WWW
Re: Google Maps Autcomplete
« Respuesta #3 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
En línea
No hay atajo ante la duda, el misterio se hace aquí...
Se hace carne en cada uno, el misterio es existir!
[u]nsigned


Desconectado Desconectado

Mensajes: 2.397

JS/Node developer


Ver Perfil WWW
Re: Google Maps Autcomplete
« Respuesta #4 en: 28 Junio 2012, 00:34 am »
Nadie?

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

Saludos!!!
En línea
No hay atajo ante la duda, el misterio se hace aquí...
Se hace carne en cada uno, el misterio es existir!
Graphixx


Desconectado Desconectado

Mensajes: 1.336


Full Stack Developer


Ver Perfil WWW
Re: Google Maps Autcomplete
« Respuesta #5 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.
En línea
Nada tiene fin solo hay pequeñas pausas, pausas que determinan el comienzo de otros. Graphixx Rōninnovation
[u]nsigned


Desconectado Desconectado

Mensajes: 2.397

JS/Node developer


Ver Perfil WWW
Re: Google Maps Autcomplete
« Respuesta #6 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!!!
En línea
No hay atajo ante la duda, el misterio se hace aquí...
Se hace carne en cada uno, el misterio es existir!
Graphixx


Desconectado Desconectado

Mensajes: 1.336


Full Stack Developer


Ver Perfil WWW
Re: Google Maps Autcomplete
« Respuesta #7 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.
En línea
Nada tiene fin solo hay pequeñas pausas, pausas que determinan el comienzo de otros. Graphixx Rōninnovation
Graphixx


Desconectado Desconectado

Mensajes: 1.336


Full Stack Developer


Ver Perfil WWW
Re: Google Maps Autcomplete
« Respuesta #8 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);
En línea
Nada tiene fin solo hay pequeñas pausas, pausas que determinan el comienzo de otros. Graphixx Rōninnovation
Graphixx


Desconectado Desconectado

Mensajes: 1.336


Full Stack Developer


Ver Perfil WWW
Re: Google Maps Autcomplete
« Respuesta #9 en: 28 Junio 2012, 17:03 pm »
Va olvidalo tampoco funciona parando el mapa en una latitud y longitud especificas, igual sigue buscando globalmente.
En línea
Nada tiene fin solo hay pequeñas pausas, pausas que determinan el comienzo de otros. Graphixx Rōninnovation
Páginas: [1] 2 Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Google Maps en 3D
Noticias 		wolfbcn 0 2,038 Último mensaje 27 Abril 2010, 21:28 pm
por wolfbcn
Tutorial API Google Maps con VB. NET y C# « 1 2 »
.NET (C#, VB.NET, ASP) 		seba123neo 11 33,384 Último mensaje 30 Noviembre 2011, 21:31 pm
por corneliusjesus
Google cierra el grifo gratuito al acceso intensivo a la API de Google Maps
Noticias 		wolfbcn 2 3,514 Último mensaje 28 Octubre 2011, 13:53 pm
por [u]nsigned
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines