Mirando el manual de referencia del formato KML de Google Earth para trazados de rutas, en la página con la documentación me encuentro un diagrama de arbol muy clarito y bien definido en el que se puede ir pinchando en los diferentes atributos y nos lleva directamente al apartado donde explica sus peculiaridades.

Me resulta muy curioso (y útil) y mirando debajo de las faldas veo que es un simple mapa de una imagen gif, con enlaces a etiquetas distribuidas por el código.

<img src=”classTree52.gif” alt=”diagrama de árbol de clases” usemap=”#Map” />
<map name=”Map” id=”Map“>
<area shape=”rect” coords=”8,34,101,80” href=”#object” alt=”Object element (parent)” />
<area shape=”rect” coords=”74,699,140,715” href=”#gxplaylist” alt=”gx:PlayList element; child of Object” />
…
</map>
ddd

Echandole un vistazo al código, vemos que se define un mapeado con la etiqueta <map> y que cada area a definir lleva la etiqueta <area>.

De area, nos interesa sobre todo los atributos shape y coords, que son los que definen el tipo de area a definir y las coordenadas donde se definen.

Shape puede tomar los valores, que repercutirán en los valores del atributo coords:

• default: define toda la imagen como un area
• rect: define un cuadrado, que viene dado por 4 coordenadas, (x1,y1) para la esquina superior izquierda de la selección, y (x2,y2) para la esquina inferior derecha de la selección.
• circle: define un circulo, que viene dado por tres coordenadas (x1,y1) para el centro del circulo y (r1) para el radio.
• poly: define un poligono dado mediante una lista de coordenadas (xn,yn) con cada uno de los vértices del polígono. Si la última coordenada no coincide con la primera, el navegador se encargará de cerrar el poligono mediante una linea recta entre ambas (pod donde caiga).

Despues de esto, solo queda definir en el atributo href el valor de una etiqueta de nuestro texto, precedida siempre por el caracter #.

Así, donde pongamos un enlace vacio con esa etiqueta como nombre (aqui sin el caracter #), al pinchar en la zona del mapa se irá directamente ahi.

<a name=”object“></a>
.      Aqui iría nuestro parrafo explicando Object
<a name=”gxplaylist“></a>
.     Aquí iría nuestro parrafo explicando gxplaylist

Facil, muy facil. Sencillo, muy sencillo. Y viejo, pero muy funcional. De lo cual se demuestra que para hacer las cosas bien no hace falta una gran tecnología, sino una correcta aplicación de la misma, y una información correctamente estructurada para que sea clara e inteligible…y no hace falta ser Google para eso ;D