Google Maps Autcomplete

[u]nsigned · 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!!

robe007 · 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 ...

[u]nsigned · 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?

Saludos!!

[u]nsigned · 27 Junio 2012, 16:30 PM

Bueno, tengo el siguiente codigo:

Código (html4strict) [Seleccionar]


<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript">
$(function(){
	//Cargar Mapa
	var latlng = new google.maps.LatLng(-43.3021264, -65.0968286);
	var myOptions = {
		zoom: 13,
		center: latlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		disableDefaultUI:true,
		disableDoubleClickZoom:true,
		navigationControl:true
	};
	var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	var input = document.getElementById('calle');
    var autocomplete = new google.maps.places.Autocomplete(input);
    autocomplete.bindTo('bounds', map);
	var infowindow = new google.maps.InfoWindow();
	
	var marker = new google.maps.Marker({
		map: map
	});
	
	
	/**/
	google.maps.event.addListener(autocomplete, 'place_changed', function() {
		infowindow.close();
		var place = autocomplete.getPlace();
		if (place.geometry.viewport) {
		map.fitBounds(place.geometry.viewport);
		} else {
		map.setCenter(place.geometry.location);
		map.setZoom(15);  // Why 17? Because it looks good.
		}

		var image = new google.maps.MarkerImage(
		place.icon,
		new google.maps.Size(71, 71),
		new google.maps.Point(0, 0),
		new google.maps.Point(17, 34),
		new google.maps.Size(35, 35));
		marker.setIcon(image);
		marker.setPosition(place.geometry.location);

		var address = '';
		if (place.address_components) {
			address = [(place.address_components[0] &&
				place.address_components[0].short_name || ''),
				(place.address_components[1] &&
				place.address_components[1].short_name || ''),
				(place.address_components[2] &&
				place.address_components[2].short_name || '')
			].join(' ');
		}

		infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
		infowindow.open(map, marker);
	});
	/**/
	
});
</script>
</head>
<body>
<input type="text" id="calle" placeholder="Direccion" size="60" />
<div id="map_canvas" style="width:500px;height:400px"></div>
</body>
</html>

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

[u]nsigned · 28 Junio 2012, 00:34 AM

Nadie?

Entre tantos usuarios y nadie ah usado esta API antes?

Saludos!!!

Graphixx · 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.

[u]nsigned · 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!!!

Graphixx · 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.

Graphixx · 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);

Graphixx · 28 Junio 2012, 17:03 PM

Va olvidalo tampoco funciona parando el mapa en una latitud y longitud especificas, igual sigue buscando globalmente.