sábado, 17 de mayo de 2008

Google maps

Una de las cosas más divertidas que he hecho en mi trabajo es un "controlador" de obras. La intención era poder "dibujar" el tramo que está en obras con unos datos específicos (nombre, punto kilométrico, incluir ficheros, etc). Además, una vez introducida debería listarse en el mapa con las otras obras, y al hacer click que se abriera una pequeña ventana (dentro de google maps) con un pequeño resumen.


Google maps es muy fácil, sólo necesitas un key para utilizar su API y leer http://code.google.com/apis/maps/, cualquiera puede hacer virguerías con google maps, con un mínimo conocimiento de JavaScript.

Yo tuve que utilizar lo que denominan "polyline" que es algo así como un código (posee encoded polyline y encoded levels) que se genera a través de lo que hay el mapa. Es decir, si dibujas una recta, pues ese código, si lo vuelves a introducir en el mapa en una siguiente sesión, se mostrará tal cual la línea.

Eso es útil para los programadores, sólo tienes que preocuparte de guardar ese encoded polyline y el encoded levels para cuando lo quieras mostrar. Además, en mi caso, guardo el Zoom Level último.

Luego ya sólo queda que al mostrarlo crear un Marker y un evento que al hacer click te muestre los datos que quieres.

function createPointMarker(point, highlighted, idObra2) {
var clr = highlighted ? "yellow" : "blue";

var point_marker = createMarker(point, clr);
point_marker.enableDragging();

GEvent.addListener(point_marker, "drag", function() {
var index = findMarkerIndex(point_marker);

if (index >= 0) {
var nLat = point_marker.getPoint().lat();
var nLng = point_marker.getPoint().lng();

var pLevel = points[index].Level;

var modifiedPoint = {
Latitude: nLat,
Longitude: nLng,
Level: pLevel
};

points[index] = modifiedPoint;
createEncodings(false);
document.getElementById('pointList').options[index]
= new Option('(' + nLat + ',' + nLng + ')', index);
}
});

GEvent.addListener(point_marker, "click", function() {
highlight(findMarkerIndex(point_marker));
if(idObra2) {
GDownloadUrl("wdatos.php?id=" + idObra2, function(data) { point_marker.openInfoWindowHtml(data); });
}
// point_marker.openInfoWindowHtml(result);
});

return point_marker;
}


El resultado: http://www.nightmare.es/ver.php

El crear obra (la parte del mapa, con polyline, etc) es copiado de: http://code.google.com/apis/maps/documentation/polylineutility.html y adaptado para mis fines.

1 comentario:

Digital, de dedo dijo...

Pues es una chulada esa web, le falta un poco de diseño pero me gusta mucho. Por cierto