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!!
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 ...
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!!
Bueno, tengo el siguiente codigo:
<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
Nadie?
Entre tantos usuarios y nadie ah usado esta API antes? :P
Saludos!!!
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.
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!!!
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.
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);
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)
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.
Muchisimas gracias por tu ayuda Graphixx, Voy a ver esto que me dices y luego te cuento!!
Saludos!!! ;-)