A través de esta serie de posts os iremos contando algunas de las tecnologías que hemos utilizado para crear Infocampus, la red social universitaria de ocio, cultura y tecnología, esperando que sea de utilidad para mucha más gente.
En este primer post vamos a hablar de Google Maps, y cómo hemos utilizado su API para la introducción de direcciones en mapas.
Infocampus te permite, al publicar anuncios, añadir diversos elementos adicionales, como imágenes, videos de YouTube (hablaremos de esto en otro post), videos propios y mapas. En el caso de los mapas, el problema fundamental era cómo pasar, de una manera cómoda y precisa, una dirección física, con calle, número, código postal… al mapa.
Gracias a la clase GClientGeocoder, podemos obtener la latitud y longitud, a partir de una dirección física. Por ejemplo, al buscar “Universidad de Alicante”, te devuelve las coordenadas 38.382199,-0.514744.
El funcionamiento básico de la clase GClientGeocoder es el siguiente:
// se define un objeto de tipo GClientGeocoder
geocoder = new GclientGeocoder();
// se solicita la resolución de la dirección
geocoder.getLatLng(“Universidad de Alicante”, function(point) {
if (!point) alert(”La direccion no ha sido encontrada”);
else alert(“La posición es: ” + point.toUrlValue();
});
Pero habría un problema, ¿que pasaría si queremos apuntar a un departamento en concreto?, ¿conoce Google todas las direcciones del mundo?, ¿resuelve con precisión cualquier dirección?. Es obvio que Google no conoce todas las direcciones del mundo, y menos direcciones internas como puedan ser los departamentos o aulas de una universidad, por lo que necesitamos un método para una vez que hemos llegado a la zona aproximada, podamos apuntar con precisión la posición exacta.
Para esto, utilizamos la clase Gevent, definiendo dos eventos que permitan al usuario seleccionar la posición exacta, bien pinchando en el mapa o bien arrastrando el puntero:
dragend: Se define sobre el puntero, y se lanzará cuando se suelte el puntero en la posición deseada, una vez arrastrado.
click: Se define sobre el mapa, y se lanzará al hacer click en la posición deseada del mapa.
Un ejemplo de la definición de ambos eventos:
// evento dragend sobre el puntero
GEvent.addListener(marker, “dragend”, function() {
alert(“Nuevas coordenadas: ” + marker.getPoint().toUrlValue());
});
// evento click sobre el mapa
GEvent.addListener(map,”click”, function(overlay,latlng) {
alert(“Nuevas coordenadas: ” + latlng.toUrlValue());
});
Juntando ambos códigos, conseguiríamos tener la aplicación que permita introducir direcciones en un mapa. Vemos el código completo:
// objetos globales
var geocoder = null;
var map= null;
var marker=null;
function initialize() {
if (GBrowserIsCompatible()) {
// se define el mapa
map = new Gmap2(document.getElementById(”mapa”));
// control básico para el mapa
map.addControl(new GsmallMapControl());
// objeto GClientGeocoder
geocoder = new GClientGeocoder();
}
}
function showAddress(address) {
if (map==null) initialize();
if (geocoder) {
// resuelve la dirección
geocoder.getLatLng(address, function(point) {
if (!point) {
alert(”La direccion no ha sido encontrada”);
}
else {
// centra el mapa, guarda la posición y añade el puntero
map.setCenter(point, 13);
if (marker!=null) map.removeOverlay(marker);
marker = new GMarker(point,{draggable: true});
// con ayuda de Jquery se guardan las coordenadas
(”#coordenadas”).attr(”value”,point.toUrlValue());
// añade los eventos para ajustar la posición
GEvent.addListener(marker, “dragend”, function() {
var punto = marker.getPoint();
$(”#coordenadas”).attr(”value”,punto.toUrlValue());
});
GEvent.addListener(map,”click”, function(overlay,latlng) {
marker.setPoint(latlng);
$(”#coordenadas”).attr(”value”,latlng.toUrlValue());
});
// añade el puntero “arrastrable”
map.addOverlay(marker);
} // fin else
}); // fin de la llamada a GClientGeocode
} // fin de la función showAddress
// llamada a la función (desde un input o directamente)
showAddress();
Podeis ver la aplicación en funcionamiento en el siguiente enlace: http://anuncios.infocampus.es/publicar.
En próximos posts veremos algunas cosas más sobre mapas: cómo generar archivos KML que puedan ser leídos desde Google Maps/Earth, utilizar la nueva API para obtener mapas estáticos…
Enlaces de interés:
