Mapas de Google en Joomla 1.6 con Phoca Maps

phoca_maps_0_1Tutorial para agregar mapas de Google a nuestra web hecha con Joomla. Con el componente “Phoca Maps”, podremos mostrar mapas de Google en nuestra página y completarlos con distintos marcadores e iconos personalizados. Además, mediante el empleo del plugin “Phoca Maps Plugin”, tendremos la posibilidad de incluir los mapas dentro de cualquiera de nuestros artículos.

Podemos descargar el componente “Phoca Maps” desde la página oficial de Phoca.

Para instalarlo, tendremos que ir al gestor de extensiones y seguir los pasos habituales de instalación. Tras pulsar en “Subir e instalar”, veremos un mensaje en el que se nos ofrece la opción de instalar o actualizar el componente. Si tenemos instalada una versión anterior, lo conveniente es actualizar, ya que la instalación nueva borrará los datos del componente antiguo.

 

phoca_maps_1

 

Una vez instalado, accederemos a la página principal del componente desde “Componentes > Phoca Maps”.

En la pestaña “Control Panel”, veremos una serie de accesos a las funciones del componente y los datos de éste. Además, desde “Check for update”, podremos comprobar si disponemos de la última versión de “Phoca Maps”.

phoca_maps_2

 

Para añadir un nuevo mapa, vamos a “Maps > New”. En “Basic Settings” tendremos que escribir el título del mapa, la descripción, establecer el tamaño, etc. Las opciones de latitud, longitud y zoom, podemos completarlas a mano o mediante la opción “Set Coordinates”.

 

phoca_maps_3

 

Esta última opción, nos dará acceso a un mapa y establecerá los datos de forma automática con solo marcar el lugar que deseamos.

 

phoca_maps_3_1

 

En “Design Settings”, podremos elegir el tipo de borde del mapa.

 

phoca_maps_4

 

En ”Advanced Settings”, definiremos las características del mapa, como el tipo de mapa (carreteras, satélite...), el tipo de control y su posición, las opciones de zoom y navegación, etc. La opción “Display Get Route Form”, nos mostrará la ruta a seguir para llegar a nuestro destino, introduciendo previamente el origen. Solo será visible desde el front-end si agregamos, al menos, un marcador al mapa.

phoca_maps_5

 

En la pestaña “Markers”, podremos añadir marcadores a nuestros mapas. Para ello, pulsamos en “Nuevo” y, en “Basic Settings”, introducimos el título del marcador y sus coordenadas. Éstas podemos establecerlas a mano o mediante la opción “Set Coordinates”.

phoca_maps_6

 

Posteriormente seleccionamos el mapa al que pertenecerá el marcador, establecemos el tamaño, la descripción y elegimos si se mostrarán los datos del GPS, si será visible la ventana del marcador, etc.

phoca_maps_7

 

En “Design Settings” podemos elegir el icono del marcador de entre los existentes, o podemos seleccionar uno personalizado. En este último caso, habrá que añadir previamente el icono personalizado.

phoca_maps_8

 

Desde la pestaña “Icons”, podremos agregar iconos personalizados para nuestros marcadores. Para ello pulsamos en nuevo y, en “Basic Settings”, introducimos el nombre y la url del icono principal y la dirección del icono que simulará la sombra.

 

phoca_maps_9

 

En la pestaña “Info”, tenemos los enlaces a la ayuda del componente, un botón de actualización y otra serie de datos sobre “Phoca Maps”.

 

phoca_maps_10

 

Una vez creados los mapas y sus correspondientes marcadores, tendremos que añadir un nuevo elemento al menú para que los mapas sean accesibles desde el front-end. Para hacerlo, vamos al gestor de menús y agregamos un nuevo elemento del tipo “Map View”.

phoca_maps_11

 

Establecemos el título y el resto de opciones propias de los menús y, en la sección “Configuración Requerida”, seleccionamos el mapa al que queremos enlazar el elemento del menú.

phoca_maps_12

 

Phoca Maps Plugin

Si en lugar de mostrar el mapa mediante un enlace del menú, queremos añadirlo a un artículo, tendremos que emplear el plugin “Phoca Maps Plugin”. Podemos descargarlo desde la página de Phoca e instalarlo siguiendo el método habitual.

Después de instalar y activar el plugin, vamos a “Componentes > Phoca Maps > Mapas”. En la columna “Plugin Code”, veremos dos códigos distintos, el primero nos mostrará el mapa completo dentro del artículo y el segundo mostrará un enlace para acceder al mapa.

phoca_maps_13

 

Copiamos el código que mas nos convenga y lo pegamos en el artículo en el que queremos que se vea el mapa.

phoca_maps_14

 

Una vez configurado el mapa y sus marcadores, obtendremos un resultado similar a este:

phoca_maps_15

 

Enlace | Phoca Maps

Enlace | Phoca Maps Plugin

Escribir un comentario

Por favor procura que tus comentarios estén relacionados con la entrada, comenta con tu nombre y no pongas enlaces en tu comentario. Intenta también respetar a los demás lectores, los comentarios off topic, promocionales, ofensivos o ilegales serán editados y borrados.


Código de seguridad
Refescar