Aloje Google Maps detallado con el complemento de WordPress Map Locations

Publicado: 2023-03-30

¿Sabía que puede alojar un mapa interactivo de Google en su sitio web de WordPress?

Es posible que ya sepa que puede incrustar un mapa de Google en cualquier página o publicación simplemente copiando el código iframe en un bloque HTML. Eso mostrará el mapa de cualquier área que hayas designado. Sin embargo, ese es el límite del método de inserción HTML.

Si desea llevar las ubicaciones de los mapas de Google a otro nivel en su sitio de WordPress, quédese porque le mostraré exactamente cómo hacerlo en este artículo.

Pero primero, ¿qué usos potenciales podría tener para alojar un mapa de Google en su sitio?

Por un lado, podrías mostrar la ubicación de tu negocio con un pin. O, si está planeando un evento, puede mostrar la ubicación exacta directamente en la página del evento para que los visitantes puedan planificar con anticipación fácilmente. Supongamos que tiene un sitio web de viajes que informa a los turistas sobre los mejores museos para visitar en una ciudad en particular. ¿O podría mostrar rutas de senderismo y permitir que los usuarios introduzcan sus propias notas sobre la caminata?

Puede hacer todo esto con el complemento de WordPress Map Locations de Creative Minds. ¡Empecemos!

Cree mapas únicos con el complemento Map Locations

Con el complemento Map Locations, puede colocar varias ubicaciones en un mapa de Google junto con información específica sobre la ubicación, además de imágenes, videos, rutas de códigos postales y marcadores de búsqueda.

Al usar la integración de mapas de Google, puede crear un sistema de ubicación de tiendas usando múltiples mapas, creando un directorio interactivo de ubicaciones. El complemento también le permite mostrar un ícono único para cada ubicación.

captura de pantalla de la página de WordPress del complemento Cm Map Locations

Además, el complemento admite:

  • Importación y exportación de ubicaciones
  • Búsqueda de ubicación por código postal
  • Incrustación de ubicaciones mediante códigos abreviados
Echa un vistazo a las ubicaciones del mapa

Primeros pasos con el complemento de WordPress de ubicaciones de mapas

El complemento Map Locations presenta un menú completo de configuraciones y alberga una Guía del usuario de fácil acceso directamente en su panel de administración de WordPress. Hay varios pasos importantes para configurar y configurar sus mapas. El primero es instalar el complemento en su sitio.

Instale el complemento de ubicaciones de mapa

Puede encontrar y descargar el complemento Map Locations en su página de WordPress.org. Alternativamente, puede buscar "ubicaciones de mapas de cm" en su panel de control en Complementos → Agregar nuevo .

También puede comprar una de las versiones premium del complemento en el sitio web de Creative Minds.

Una vez instalado y activado, encontrará un nuevo elemento de menú en el menú del panel del lado izquierdo llamado "Ubicaciones del mapa CM".

El primer paso para configurar el complemento es ingresar su clave API de Google Maps. Si aún no tienes uno, repasemos eso ahora.

Obtener una clave API de Google Maps

Primero, necesitarás una cuenta de Google. Desde julio de 2018, el uso de datos de Google Maps, Routes y Places también requiere que tengas información de facturación en Google Cloud. Sin embargo, tendrá la oportunidad de agregar esa información a medida que crea su clave de API.

En CM Map Locations→Settings , encontrará un campo para la clave API y un enlace para obtenerla, si aún no tiene una.

captura de pantalla del menú Ubicaciones del mapa

Necesitará varias claves API para usar el complemento Map Locations:

  • API de JavaScript
  • API de geolocalización (para algunas funciones; requiere HTTPS)
  • API de geocodificación
  • API de lugares

Para obtener estas claves, diríjase a la página de desarrolladores de Google.

Navegue hasta su proyecto o cree uno nuevo.

captura de pantalla del menú del proyecto Google Developer

A continuación, vaya a API y servicios→Biblioteca .

Seleccione una API de la lista o use la barra de búsqueda para encontrar una de las API que mencioné anteriormente. En el menú emergente de la API, haga clic en el botón azul Habilitar . Repita los pasos para cada API.

Una vez que tenga todas las API habilitadas, debe obtener la clave (solo necesita una). En la barra lateral, seleccione Credenciales donde verá su clave de API en la lista. Copie la clave API en su portapapeles; la pegará en su sitio web en un momento.

Primero, debe habilitar la facturación de Google Cloud como mencioné anteriormente. Este es un paso importante para que el complemento Maps Location funcione correctamente. Cuando inicie sesión en su Proyecto, haga clic en el menú de hamburguesas en la parte superior izquierda y seleccione Facturación. Recibirá un mensaje que le pedirá que vincule una cuenta de facturación . Haga clic en ese botón y siga las indicaciones.

Ahora que ha completado todos los pasos para configurar y obtener sus claves API de Google, regrese a su sitio de WordPress. En la página de configuración de CM Map Locations, pegue su clave API de Google Maps y haga clic en Guardar en la parte inferior. Si lo desea, puede probar la configuración con el botón de la derecha.

Agregar una ubicación

El complemento Map Locations crea una página de índice para los visitantes y para los usuarios. Una vez que agregue una ubicación, aparecerá en esas páginas. Antes de agregar una ubicación, es una buena idea crear al menos una categoría para sus mapas.

Esto es tan simple como agregar una nueva categoría de publicación, pero estas son específicas para Map Locations. Cree tantas categorías como desee en CM Map Locations→Categories . También puede agregar iconos de marcador predeterminados para cada categoría.

captura de pantalla del menú Ubicaciones del mapa

Una vez que haya creado sus categorías, puede agregar una ubicación. Puede usar el menú Ubicaciones del mapa de CM o hacer clic en + Nuevo en la barra de herramientas de administración y elegir Ubicación . En el nuevo editor de la página Ubicación, complete los campos Nombre de la ubicación y Descripción que correspondan a la ubicación deseada.

Seleccione la categoría adecuada de la lista y elija un icono de Marcador. También puede cargar su propio icono si lo desea. A continuación, puede agregar cualquier imagen o video sobre su ubicación; esto puede ser útil para los sitios de guías de viaje.

A continuación, desplácese hacia abajo hasta el mapa de Google que se muestra en la página. Busque la ubicación o mueva el mapa según sea necesario. Cuando tenga su ubicación a la vista, seleccione una de las herramientas de dibujo y dibuje los límites de su ubicación en el mapa.

captura de pantalla de la creación de una ubicación de mapa en un mapa de Google

Si se desplaza hacia abajo en la página, verá la información precisa de latitud, longitud y dirección para su ubicación completada automáticamente. Si gustas puedes agregar:

  • Número de teléfono
  • Sitio web
  • Dirección de correo electrónico
  • URL

Haga clic en el botón Guardar y su ubicación se agregará a la lista de ubicaciones disponibles en su sitio. Al ver la ubicación, sus visitantes verán la información y el mapa cuidadosamente formateados.

captura de pantalla del mapa mostrado de Santa Bárbara

Creación de página de índice

El propósito de la página de índice es mostrar un mapa con marcadores que representan varias ubicaciones, junto con una lista personalizable de esas ubicaciones.

La página de índice se puede configurar para mostrar información diferente sobre cada ubicación, como:

  • Título
  • Descripción
  • DIRECCIÓN
  • Clasificación.

Los usuarios pueden interactuar con el mapa y la lista de ubicaciones para buscar ubicaciones específicas o explorar todas las opciones disponibles.

La página de índice también puede incluir funciones como un filtro de radio de código postal y la capacidad de agregar direcciones URL o direcciones personalizadas a cada ubicación.

Mostrar mapas usando códigos cortos

Los códigos cortos son accesos directos específicos de WordPress que permiten a los usuarios agregar funciones dinámicas, como mapas con ubicaciones, a publicaciones y páginas.

Existen diferentes códigos abreviados para varios propósitos, incluida la visualización del fragmento de una ubicación, la visualización de una ubicación específica en un mapa, la visualización de mapas con ubicaciones de una categoría y la visualización de mapas de ubicación actuales.

Los usuarios pueden agregar parámetros para hacer que estos códigos abreviados sean más específicos, como elegir el tema, el ancho y la altura de un mapa o limitar la cantidad de ubicaciones que se muestran.

A continuación se muestra una lista de todos los códigos cortos y sus parámetros, junto con ejemplos para que sea más fácil de entender:

Códigos cortos de ubicación:

  1. Retazo
    • Código abreviado: [cmloc-snippet]
    • Uso: muestra el fragmento de una ubicación.
    • Parámetros de filtrado: id
    • Ver parámetros: destacado
    • Muestra: [cmloc-snippet id=”487″ destacado=”mapa”]
  2. Un mapa de ubicación específico
    • Código corto: [cmloc-ubicación-mapa]
    • Uso: Muestra una ubicación específica en un mapa.
    • Parámetros de filtrado: id
    • Parámetros de visualización: tema, altura del mapa, ancho del mapa, ancho, título de presentación, fecha de presentación
    • Muestra: [cmloc-ubicación-mapa id=1767 mapwidth=640 mapheight=480 width=700 showtitle=1 showdate=1]
  3. Mapa de Múltiples Ubicaciones
    • Código corto: [cmloc-ubicaciones-mapa]
    • Uso: Muestra mapas con ubicaciones de una categoría elegida.
    • Parámetros de filtrado: showonlybyparams, limit, page, category, taxonomy_key
    • Parámetros de vista: tema, lista, ancho de mapa, ancho, menú, información sobre herramientas, mapa, seguimiento de usuarios, desde_fecha, hasta_fecha
    • Obtener parámetros: bgcolor, bgcolor_filter, hora, filtro_hora, identificador, filtro_identificador, desde_fecha, hasta_fecha, horas, ruta
    • Muestra 1: [cmloc-ubicaciones-mapa categoría=”montañas”]
    • Muestra 2: [cmloc-ubicaciones-mapa lista=límite izquierdo=4 página=1 categoría=”111″]
  4. Mapa de ubicaciones actuales
    • Código abreviado: [cmloc-actual-ubicaciones-mapa]
    • Uso: Muestra los mapas de las ubicaciones actuales.
    • Parámetros de filtrado: límite, página
    • Ver parámetros: tema, ancho de mapa, ancho, información sobre herramientas
    • Muestra: [cmloc-actual-ubicaciones-mapa]

Los códigos cortos se pueden encontrar en la opción Códigos cortos como referencia.

Códigos cortos disponibles

Puede encontrar instrucciones detalladas sobre cómo configurar códigos abreviados y mostrar ubicaciones usando los códigos abreviados en los documentos de ayuda de la base de conocimientos de CM Map Locations.

Control de acceso

Si desea que sus mapas sean interactivos, debe configurar el Control de acceso en el menú Ubicaciones de mapas de CM . Hay múltiples opciones disponibles para el acceso.

La configuración de acceso permite al administrador controlar quién puede ver, ver, crear y actualizar ubicaciones, así como qué roles pueden usar la biblioteca multimedia al cargar imágenes.

El administrador puede elegir entre opciones preestablecidas, como todos, usuarios registrados o roles de usuario específicos, como administrador, editor, autor, colaborador o suscriptor.

Como alternativa, pueden crear un rol personalizado y enumerar los nombres de capacidad de quienes tienen permiso para acceder a él.

Lista de ubicaciones

Esto le permite designar quién puede acceder al índice de ubicaciones y buscar o filtrar ubicaciones.

Ver ubicación

Esto determina quién puede mostrar la página de la ubicación.

Crear ubicación

Seleccione quién puede crear ubicaciones.

Actualizar ubicación propia

Seleccione quién puede actualizar ubicaciones.

Roles permitidos para usar la biblioteca de medios

Si un suscriptor tiene la capacidad de cargar archivos, puede ver la pestaña Biblioteca multimedia de WordPress al cargar la imagen para una ubicación. Si desea evitar que los usuarios realicen búsquedas en la biblioteca multimedia de su sitio web, asegúrese de revocar el acceso para los roles específicos.

Para cada categoría, puede elegir cualquiera de los roles predeterminados incluidos en el núcleo de WordPress o roles proporcionados por complementos que designan roles específicos.

Características adicionales

He cubierto los conceptos básicos de configuración y uso del complemento Map Locations, pero hay muchas más funciones disponibles.

Temas

Hay hasta seis temas para elegir para que sus ubicaciones se destaquen en su sitio.

Mosaicos/Capas

Un mosaico o capa es una sección de un mapa que se genera y se muestra por separado del resto del mapa.

Estos mosaicos o capas suelen ser imágenes cuadradas que se procesan previamente y se almacenan en caché en el servidor, lo que les permite mostrarse rápidamente en el mapa sin necesidad de que el navegador del usuario cargue todo el mapa a la vez.

Los mosaicos o capas se utilizan para mejorar la presentación visual de los mapas al permitir que se muestre información adicional sobre el mapa base. Esto puede incluir etiquetas, marcadores y otros datos que pueden ayudar a los usuarios a navegar por el mapa y comprender el contexto del área que se muestra.

Además, los mosaicos o las capas también pueden mejorar el rendimiento de los mapas al permitir que el navegador cargue solo las partes del mapa que están actualmente a la vista, en lugar de todo el mapa a la vez.

Puede agregar capas sobre sus mapas a la información, como mostrar los ciclos de tráfico usando OpenStreetMap u otro servicio.

Ejemplo de superposición de mosaicos en mapas
Ejemplo de superposición de mosaicos en mapas

La configuración se encuentra en la pestaña General, en la sección Mapa.

  • Vista de mapa predeterminada : elija cuál es la vista predeterminada. Los usuarios pueden cambiar esto en cualquier momento.
  • Insertar URL de mosaico : agregue la URL del servicio de mosaico de su elección. Compruebe Tiles – OpenStreetMap Wiki para ver más ejemplos
Configuración de teselas y capas en mapas
Configuración de teselas y capas en mapas

Permita que los visitantes activen o desactiven los mosaicos mientras navegan por el mapa.

Seleccione el botón Mosaicos para mostrar u ocultar mosaicos
Seleccione el botón Mosaicos para mostrar u ocultar mosaicos

Incluso puede permitir que los usuarios carguen mosaicos.

Mostrar ubicación de usuario

Tus usuarios pueden compartir su geolocalización y mostrarla en el mapa.

Soporte REST/API

Use la API REST para crear ubicaciones desde otros sitios o incluso aplicaciones móviles.

Plantillas de visualización

Hay varias plantillas de visualización disponibles, lo que le permite crear fácilmente un localizador de tiendas, una lista o un punto de interés.

Búsqueda por radio

Puede buscar un radio definido desde un código postal en cualquier país.

Direcciones de Waze y Google

Cuando crea una nueva ubicación, los enlaces de dirección de Wave y Google se agregan automáticamente a la lista.

Precios del complemento Map Locations

Puede instalar y usar el complemento Map Locations de forma gratuita en tantos sitios de WordPress como desee. Incluye todos los elementos esenciales que necesita para crear tantas ubicaciones como desee, agregue una descripción e imágenes y muestre cada ubicación en su mapa único. Sin embargo, al comprar versiones premium, obtiene acceso a más funciones.

Ubicación del mapa esencial (Pro) = $ 39 / año

Además de los elementos esenciales enumerados anteriormente, obtiene plantillas de visualización, importación/exportación, soporte para categorías, información meteorológica, control de acceso y más, en un solo sitio web.

Ubicación avanzada del mapa + Paquete de administrador de ruta = $ 69 / año

Este nivel agrega el complemento Route Manager de Creative Minds y amplía la licencia a tres sitios web.

Ultimate Map Location + Map Routes + 5 Add-ons = $119/año

El nivel Ultimate agrega varios complementos y el complemento Map Routes, con una licencia para hasta diez sitios web.

Cada nivel proporciona un año de soporte y ofrece una garantía de devolución de dinero de 30 días.

Muestre mapas interactivos en su sitio de WordPress

El complemento Map Locations le brinda la capacidad de crear listas de ubicaciones de tiendas, guiar a los turistas a través de cualquier ciudad o incluso permitir que los usuarios creen y ajusten mapas para satisfacer sus necesidades. Este es un complemento en la gran selección de ofertas del equipo de desarrollo de Creative Minds.

Pruebe el complemento Ubicaciones del mapa