My Maps location: Ubicaciones y categorías

1. Obtenga una clave API de Google Maps

Cada vez que uses las API de Google Maps, si tu dominio se creó después del 22 de junio de 2016, debes incluir una clave para validar tu solicitud.
Obtén una clave y habilita la API: https://developers.google.com/maps/documentation/javascript/get-api-key

Más información: https://developers.google.com/maps/documentation/javascript/usage?hl=es

El primer paso es crear un proyecto y luego escribir el nombre del proyecto.

Si quiero permitir todas las solicitudes de midominio, entonces el patrón a seguir es *.joomunited.com/*
Si solo desea permitir un solo dominio, por ejemplo midominio.com, entonces el patrón sería joomunited.com/*

En un entorno de host local, puedes poner cualquier clave válida y funcionará sin ninguna referencia de dominio.

Luego se genera la clave API, que es la clave que debes copiar para agregarla a My Maps location.

Añade la clave a My Maps Location.

Desde la Componentes > My Maps Location > Opciones , puede agregar una clave en la configuración.

Pegue la clave.

Resumen paso a paso:

Así que los pasos que sigo son

• Vaya a la consola API de Google
• Crear o seleccionar un proyecto
• Haga clic en Continuar para habilitar la API y cualquier servicio relacionado
• En la página Credenciales, obtenga una clave de navegador (y configure las Credenciales de API)
• Para evitar el robo de cuotas, proteja su clave API siguiendo estas prácticas recomendadas

2. Administrar categorías de ubicación

Las ubicaciones se clasifican en categorías. Estas categorías pueden mostrarse como filtro en la interfaz o usarse como parámetro predefinido en un elemento de menú para cargar ubicaciones categorizadas.
 

Si tiene muchas ubicaciones, se recomienda usar categorías. Puede crear categorías y subcategorías.
Para crear una categoría, vaya a My Maps location > Ubicación > Categoría y haga clic en Nuevo.

Luego, desde la pantalla de categorías, deberá agregar un título y una categoría principal en caso de que desee crear una subcategoría

También puede definir un marcador predeterminado para la ubicación en la categoría utilizando la pestaña Selección de marcador.

3. Crea una ubicación

Para crear una ubicación, vaya a My Maps location > Ubicación > Ubicaciones > Nueva

Hay 3 campos obligatorios:

• Nombre de la ubicación
• Categoría de la ubicación
• Detalles de la ubicación (dirección)      

Para la dirección tienes 3 soluciones para agregarla:

• Utilice el campo de búsqueda (recomendado)
• Navegue por el mapa y use el cursor para señalar una ubicación
• Complete una dirección (debe ser válida en Google Maps)

Para agregar una ubicación con el motor de búsqueda, escriba el nombre del lugar que desea agregar.

Al seleccionar, los campos de latitud y longitud se completarán automáticamente. ¡Mis mapas también están integrados con Google Places! Esto significa que puedes buscar una tienda o cualquier otro elemento registrado en Google Maps; nuestro componente obtendrá toda la información del lugar.

También puedes moverte por el mapa y poner un marcador directamente, el resultado será el mismo y obtendrás una latitud y una longitud rellenadas automáticamente.

Tenga cuidado con el campo de dirección y código postal si lo llena manualmente, debe coincidir con una dirección conocida de Google Maps.

Toda la demás información de la ubicación (descripción, horario,...) se muestra en la vista detallada de la ubicación.

El enlace de contacto en la edición de detalles de ubicación permite añadir un enlace de contacto, un mailto o una URL por ubicación. En la interfaz, aparecerá un botón de contacto que abrirá la URL o ejecutará la acción mailto.

4. Otra información de ubicación

En cada ubicación puedes agregar una imagen y un marcador. 

• Imagen de ubicación: la imagen se mostrará como una miniatura en la información sobre herramientas de la ubicación y en un tamaño más grande en la página de detalles de la ubicación.
• Usar el ícono de categoría: usa el ícono que colocaste en el campo de categoría de las ubicaciones de mi mapa
• Fondo del marcador: elige el color para el fondo de tu marcador
• El marcador se mostrará en el mapa como un icono de ubicación. También incluye marcadores para tus ubicaciones en My Maps Location .
• Usar un enlace personalizado anulará el enlace al detalle de la ubicación mediante una URL personalizada.

My Maps location utiliza la función multilingüe nativa de Joomla. Puedes definir un idioma en las categorías de ubicación y en las ubicaciones. Al cambiar de idioma, las ubicaciones se filtrarán como cualquier otro contenido de Joomla para mostrar el contenido en el idioma aprobado.

El campo de descripción de la ubicación es uno de los más importantes.
Se mostrará en la página de detalles de la ubicación y, según el tema, como texto introductorio en los resultados de búsqueda. Aún más importante, la descripción es un editor WYSIWYG con todos los plugins instalados, lo que significa que puedes añadir lo que quieras (imágenes, vídeos, etc.).

Aquí está el texto de introducción que se muestra en los resultados de búsqueda de ubicación.

El campo de etiqueta sigue el mismo sistema de etiquetas que en Joomla. Puedes añadir etiquetas y subetiquetas y cargarlas en la interfaz como filtro. Para gestionar todas las etiquetas, simplemente carga el componente de etiquetas de Joomla: Menú Componente > Etiquetas.
En la interfaz, según la configuración, las etiquetas pueden mostrarse como casillas de verificación (como se muestra a continuación) o como listas desplegables.

My Maps Location cuenta con campos adicionales para completar la metainformación (para motores de búsqueda). Estos campos se cargan en la página de detalles de la ubicación.

5. Mostrar ubicaciones en la interfaz

Para mostrar sus ubicaciones en la interfaz puede utilizar:

• Un menú para mostrar el motor de búsqueda de ubicación, una ubicación única o una categoría de ubicaciones
• Un módulo para mostrar un campo de búsqueda o seleccionar un conjunto de ubicaciones
• Un botón del editor para mostrar ubicaciones individuales o múltiples en cualquier editor

Cargar ubicaciones desde un menú

Desde el administrador de menús de Joomla, añade un elemento y selecciona el tipo "Búsqueda y visualización de ubicaciones". Se mostrará el buscador de ubicaciones con filtros.
Selecciona "Vista detallada de ubicación" para mostrar una única ubicación predefinida.

Desde la pestaña principal del menú puedes configurar:

• Introducir dirección: puedes forzar que se muestre una dirección predeterminada al cargar la página. Puede dejarse en blanco.
• Distancia: la distancia a la que se bloqueará la búsqueda, con referencia a la dirección anterior. Se puede dejar en -1 (valor predeterminado).
• Categoría: cargar una categoría específica de ubicación
• Límite de búsqueda: limita el número de resultados de búsqueda. 10 solo devolverá los 10 primeros resultados en la búsqueda de ubicación
• Ordenar: ordenar los resultados de búsqueda por fecha, título y distancia (predeterminado)

Luego, en la pestaña del menú My Maps Location , puedes configurar:

• Seleccionar componente: My Maps Location o cualquier integración de terceros como K2, Jomsocial ...
• ID de categoría predeterminada (extensiones de terceros): categoría predeterminada para cargar cuando se utiliza una extensión de terceros, como K2, Hikashop o Adsmanager, ID de lista de CB para el generador de comunidades
• Ubicaciones de categorías secundarias: Muestra también como resultados de búsqueda las ubicaciones de las subcategorías, no solo la seleccionada anteriormente
• Tema: seleccione uno de los 3 temas predeterminados, ancho completo y barra lateral del tema de búsqueda y visualización de resultados disponibles para el elemento del menú
• Proveedor de mapas: seleccione Google Maps, Bing Maps, Mapbox, OpenStreetMap, Baidu o Mapquest para diseñar sus mapas
• Habilitar etiquetas de búsqueda : permite realizar consultas de búsqueda utilizando nombres de etiquetas de ubicación
• Diseños: Dependiendo de la fuente del mapa, tienes varios tipos de mapas y colores.
• Capa de mapa: Añade datos (capas) a tus mapas. Hay capas KML, de tráfico, de transporte público y de ciclismo.
• URL de la capa de Google Maps: utilice la capa de datos para almacenar sus datos personalizados o para mostrar datos GeoJSON en un mapa de Google
• Tipo de Bing Maps: Si Bing Maps es su proveedor de mapas, seleccione la apariencia y los datos de Bing Maps
• Tipo de OpenStreetMap: si OpenStreetMap es su proveedor de mapas, puede agregar algunos datos (capas) a sus mapas
• Información sobre herramientas de ubicación: al cargar el mapa, abre automáticamente la información sobre herramientas de ubicación después de la búsqueda de ubicación
• Zoom del mapa: define un nivel de zoom predeterminado en el mapa
• Opciones de ancho y alto de mapas y resultados de búsqueda

Visualización frontal basada en tema

Resultado de una búsqueda de ubicación única:

Mostrar ubicaciones mediante un módulo

My maps location viene con 2 módulos para ubicaciones nativas + otro para integración de terceros (como un módulo para mostrar las ubicaciones de los elementos K2)

El módulo Mapa te permite mostrar tus ubicaciones con los mismos filtros que el menú, pero en una posición específica. Las ubicaciones se mostrarán como Mapa o Lista. Puedes seleccionar un conjunto de ubicaciones o categorías.

My Maps Location – Módulo de Búsqueda mostrará un motor de búsqueda con algunos filtros como opción como el ancho del mapa o el componente en el que se buscará la ubicación (busque la ubicación K2 solo por ejemplo).

Módulo de visualización en el frontend:

Mostrar ubicaciones usando un botón del editor

El botón del editor se cargará en tu editor de Joomla (normalmente en artículos o módulos HTML personalizados). Lo verás en la parte inferior del editor.
Al hacer clic, verás una ventana emergente que te permite seleccionar una o varias ubicaciones que hayas añadido previamente.

Luego, puedes seleccionar una o varias ubicaciones y pulsar el botón para añadirlas a tu artículo. Si no especificas ningún nivel de zoom, se cargará automáticamente para ajustarse a tu ubicación.
El código de etiqueta que verás en tu editor WYSIWYG será similar a este modelo: {mymaplocations mapid width height}

Ejemplo: {mymaplocation id=1 width=58% height=400px zoom=10 type=google} Este código mostrará un mapa con el ID de ubicación = 1, con un ancho del 58%, una altura de 400px, un zoom de 10x y tipo Google. Se usa la coma para agregar más de una ubicación en un mapa. Ejemplo: {mymaplocation id=1 width=58% height=400px zoom=10 type=google} ID de ubicación = 1, 2, 3.