Mapa de ubicación dinámico con Google Maps

Google Maps es una herramienta de cartografía para tecnología web que se ha hecho muy popular. A día de hoy es imprescindible utilizarlo para la sección de 'Contacto' o 'Cómo llegar' de cualquier sitio web. Un ejemplo de cómo se hacían anteriormente las cosas sería el plano de acceso al Instituto de Agrobiotecnología de la UPNA. Mientras que si utilizamos los mapas interactivos de Google Maps obtenemos un resultado en nuestra página como el del acceso al Centro de Innovación Tecnológica de Automoción de Navarra.

Estos días pasados además se ha producido la activación de Google Street View sobre su plataforma Maps en Pamplona (ver noticia). Con esta aplicación podemos hacer un zoom sobre los mapas hasta ver detalles fotográficos a nivel de calle e ir desplazándonos por la misma.

Para utilizar esta herramienta en nuestro sitio Joomla! existe el plugin GoogleMaps que se puede descargar desde aquí. Tras su instalación es necesario activar el componente desde 'Gestor de plugins' -> 'Google Maps' -> Publicado: Si (en la columna de la izquierda) y Published: Si (en la columna de la derecha).

Para visualizar un mapa en un artículo hay que escribir el código siguiente en el editor web. Con cuidado de evitar retornos de línea, y de incluir las llaves que contienen el código:

{mosmap width='500'|height='400'|lat='52.052312'|lon='4.447141'|zoom='3'|zoomType='Large'|zoomNew='0'|mapType='Satellite'|showMaptype='1'|overview='0'|text='sv DWO'|lang=''}

Los valores 'lat' y 'lon' son las coordenadas del punto en el que se centrará el mapa. Los de la UPNA son por ejemplo: 42.800208,-1.636473. Los valores 'width' y 'height' son las dimensiones del mapa. Si sustituís 'Satellite' por 'Map' se mostrará en formato mapa en vez de imagen de satélite.

Una forma sencilla de localizar las coordenadas exactas de la ubicación deseada es utilizar Google Maps, acercarse al punto deseado, pulsar con el botón derecho del ratón, clic en '¿Qué hay aquí?', y se muestran las coordenadas exactas en el campo de búsqueda (arriba a la izquierda).

El valor de 'text' en el código anterior es el texto que se muestra en el cuadro que se abre al pulsar el puntero.