Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress Plugins

Crea mapas personalizados con el complemento MapSVG

by
Difficulty:BeginnerLength:MediumLanguages:
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

Spanish (Español) translation by Luis Chiabrera (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

Si es como yo, ha estado utilizando Google Maps para agregar mapas a sus sitios de WordPress durante años, pero a veces se siente un poco frustrado por la falta de opciones de personalización.

En este tutorial, le mostraré cómo usar una alternativa: un complemento de WordPress llamado MapSVG que le permite agregar mapas interactivos a su sitio. Luego, puede personalizar sus mapas con colores, marcadores de posición y ventanas emergentes, y permitir que los usuarios los busquen.

Le mostraré cómo configurar un mapa con el complemento, cómo personalizarlo y cómo agregarlo a una página de su sitio.

Lo que necesitarás

Para seguir este tutorial, necesitarás:

  • Una instalación de WordPress
  • El complemento MapSVG instalado y activado.
  • sus datos: las ubicaciones que desea trazar en su mapa (no necesita referencias de mapas ni coordenadas porque el complemento se encargará de eso)

Puedes crear un mapa de cualquier parte del mundo, pero para este tutorial voy a crear un mapa del Reino Unido, ya que es de donde soy, y marcarlo con mis lugares de vacaciones favoritos aquí. Quién sabe, puedo inspirarte!

Enlace a la API de Google Maps

Lo primero que debe hacer es conectarse a la API de Google Maps, de modo que el complemento pueda agregar marcadores para cada una de sus ubicaciones.

Para obtener una clave de API, vaya a la consola de desarrolladores de Google y siga las instrucciones allí. No los analizaré detalladamente, ya que Google lo hará a través de los pasos, y pueden cambiar para cuando usted lea esto.

Deberá habilitar lo siguiente en el panel de control de la API de Google (no en las pantallas de complementos en el administrador de su sitio):

  • API de mapas
  • API de geocodificación
  • API de lugares
  • Establecer restricciones en 'Ninguna'

Una vez que haya hecho eso, copie su clave de API de Google y vuelva a su sitio. En la pantalla principal de MapSVG, seleccione el botón API de Google. Pega tu clave API y guárdala.

Ahora estás listo para crear un mapa.

Creando un Mapa

Para crear un mapa, haga clic en el enlace MapSVG en el menú de administración y luego haga clic en Nuevo Mapa SVG en la parte superior izquierda de la pantalla. Desde aquí, puede seleccionar de una lista de mapas SVG que vienen incluidos con el complemento. Comience a escribir el nombre del país del que desea un mapa y el complemento se completará automáticamente.

create a mapcreate a mapcreate a map

Una vez que haya seleccionado su país, el complemento generará automáticamente un mapa para que lo personalice:

a new map of the UK before customizationa new map of the UK before customizationa new map of the UK before customization

Comience por darle un nombre en el campo Título en el lado derecho, haga clic en el botón Guardar y luego puede comenzar a personalizarlo.

Añadiendo colores personalizados

Cuando importas tu mapa por primera vez, será negro contra un fondo gris. Vamos a personalizar eso.

Haga clic en Colores en el menú desplegable en la página de edición de mapas, para acceder a la pantalla de edición de colores.

the colors screen before customizationthe colors screen before customizationthe colors screen before customization

Ahora dedique un poco de tiempo a ajustar los colores en su mapa utilizando los selectores de color. Puede personalizar el color de fondo, el color base para sus regiones, el color del borde, el color de la hover, el color seleccionado y más.

Cuando edite el hover y los estados seleccionados, puede establecer un color personalizado o usar la configuración de Brillo para usar una versión más brillante o más opaca del color base.

Voy a usar una paleta de azules para que mi mapa no se vea demasiado llamativo.

Así es como se ve mi mapa con un condado seleccionado y otro en el estado de desplazamiento:

a map of the UK in bluea map of the UK in bluea map of the UK in blue

También puede editar los colores de regiones individuales, para darle a su mapa un mayor interés visual. Haga esto haciendo clic en Editar regiones sobre el mapa o Regiones en el menú desplegable principal. Seleccione cada región y luego seleccione el selector de color en el lado derecho de la lista de regiones. Tiene sentido tener todos los códigos hexadecimales de tus colores almacenados en cualquier otro lugar para que puedas copiarlos y pegarlos.

De nuevo, me quedo con mi paleta de azules:

map of the UK with counties in varying shades of bluemap of the UK with counties in varying shades of bluemap of the UK with counties in varying shades of blue

Tómate un tiempo para modificar estos. ¡La parte difícil está en organizar los colores para que los condados o estados vecinos estén en diferentes colores!

Agregar campos de base de datos

Ahora que tiene su mapa con el aspecto que desea, es hora de agregar algunos campos que puede usar para sus marcadores. Para ello, utilice la opción Base de datos en el menú desplegable.

Haga clic en el icono Editar campos en la parte superior del panel para comenzar a agregar campos. Voy a agregar lo siguiente para mis marcadores:

  • nombre
  • descripción
  • imagen
  • marcador

Podrías agregar lo que quieras. Tómese un tiempo para pensar qué tipo de información las personas que visitan su sitio querrán saber sobre las ubicaciones en su mapa. Por ejemplo, si está mapeando las oficinas de su empresa, la gente querrá un nombre y una dirección, y posiblemente información sobre qué tipo de negocio maneja esa oficina o sus horarios de apertura.

El campo esencial es Marcador: sin él, no podrá agregar esos marcadores a su mapa.

Puede usar un rango de tipos de campos desde cuadros de texto para seleccionar campos, lo que significa que puede predefinir qué tipo de ubicación está agregando y usar eso. Para un negocio minorista, esto significa que puede seleccionar cuáles de sus ubicaciones son tiendas grandes, tiendas fuera de la ciudad o pequeñas boutiques, por ejemplo.

creating a field for the databasecreating a field for the databasecreating a field for the database

Al editar el campo, puede agregar texto de ayuda para otras personas que editan el campo y puede especificar si el campo se podrá buscar. Tiene sentido tener tanto contenido de texto como sea posible con capacidad de búsqueda.

Agregando Lugares y Marcadores

¡Ahora viene la parte divertida!

Su mapa está todo configurado y usted tiene los campos de su base de datos, pero aún necesita agregar esos marcadores.

Primero, debe agregar los datos para sus ubicaciones en la base de datos. Seleccione la pestaña Base de datos de la lista desplegable si aún no está en ella, y luego haga clic en el signo + en la parte superior derecha para agregar cada ubicación.

adding locations to the mapadding locations to the mapadding locations to the map

Sigue agregando hasta que los tengas todos. Aquí están los míos:

a map of the UK with locations addeda map of the UK with locations addeda map of the UK with locations added

Ahora que tiene las ubicaciones en la base de datos, es hora de agregar el marcador para cada una.

Para cada ubicación, comience a escribir la dirección en el campo Marcador. El complemento sugerirá automáticamente una ubicación a medida que escribe:

adding a marker to a locationadding a marker to a locationadding a marker to a location

Seleccione el lugar correcto de la lista que le proporciona el complemento y luego guarde su ubicación. Repita esto para todas las ubicaciones en su base de datos.

Una vez que hayas terminado, tu lista de ubicaciones se verá así:

A map of the UK with markers addedA map of the UK with markers addedA map of the UK with markers added

Configurando Popovers

Ahora tiene su mapa, sus ubicaciones y todos sus marcadores. ¡Pero aún no has terminado! El siguiente paso es configurar popovers. De esa manera, cuando alguien ve el mapa, puede desplazarse sobre las ubicaciones que ha agregado y ver su descripción e imagen (o cualquier otra cosa que haya agregado a su propio mapa).

Seleccione la pestaña Acciones en el menú desplegable. Desplácese hacia abajo hasta la sección Marcador y marque la casilla de verificación Mostrar ventana emergente. Asegúrese de que sea este cuadro, hay algunos de ellos en esta pantalla, para diferentes ventanas emergentes.

Una vez que hayas hecho eso, necesitas configurar la plantilla para los popovers. Haga clic en el enlace de la plantilla emergente Objeto DB para mostrar un panel de edición vacío. Tendrá que rellenar esto utilizando una combinación de HTML y campos del complemento.

Aquí está el marcado que estoy usando en el mío:

El texto dentro de las llaves será el mismo texto que se configuró como el título del campo para cada uno de los campos que agregó a la base de datos. Si no puede recordar lo que agregó, vuelva a la pestaña Base de datos y aparecerán en los encabezados de la lista.

El tipo de campo que es diferente es imágenes. Aquí, debe agregar el marcador de posición para obtener la fuente de la miniatura. El código anterior recorre cualquier imagen agregada al campo de imágenes, por lo que si agrega más de una, todas se mostrarán. Para más sobre esto, vea la documentación del plugin.

Ahora intente hacer clic en uno de los marcadores y verá una ventana emergente:

a popover in the plugin admin screensa popover in the plugin admin screensa popover in the plugin admin screens

Sugerencia: si no puede ver una ventana emergente, puede deberse a que marcó la casilla Mostrar ventana emergente incorrecta o está editando la plantilla incorrecta. Asegúrese de que la casilla de verificación que marcó estaba en la sección Marcador y haga clic en la pestaña Acciones y que la plantilla que está editando es la plantilla emergente de Objeto DB. Puede seleccionar plantillas de la lista desplegable en la pestaña Plantillas.

Configurando Directorio y Búsqueda

Para que los usuarios puedan ver los detalles de sus ubicaciones y buscar el contenido en su mapa, deberá configurar el directorio utilizado para la búsqueda y asegurarse de que la búsqueda esté activada.

Vaya a la pestaña Directorio. En el conmutador Directorio, seleccione Activar. En Origen de datos, seleccione Base de datos.

Haga clic en el enlace de la plantilla del elemento Directorio para editar la plantilla utilizada para el directorio. Tendrá que agregar sus campos de manera similar a como lo hizo al agregar los popovers, excepto que esta vez solo usa los marcadores de posición y no HTML. Solo estoy agregando {{name}}, pero es posible que desee incluir más.

Nota: si no desea que aparezca una lista de ubicaciones junto a su mapa, cambie Directorio a Desactivado y no se preocupe por la plantilla.

Ahora pulsa el botón Guardar para guardar tu mapa. Es hora de agregarlo a una página en su sitio.

Añadiendo el mapa a una página

Abra (o cree) la página a la que agregará el mapa.

Donde quiera que aparezca el mapa, haga clic en el icono Insertar MapSVG, que parece un marcador negro.

Seleccione el mapa que desea insertar de la lista, y el complemento agregará un shortcode a su página para mostrar el mapa. Ahora guarda tu página y pruébala.

Aquí está mi mapa:

a map of the UK with markers on a page in the sitea map of the UK with markers on a page in the sitea map of the UK with markers on a page in the site

Y cuando selecciono una de las ubicaciones, aquí está la ventana emergente:

a popover on the map in a page in my sitea popover on the map in a page in my sitea popover on the map in a page in my site

MapSVG le ofrece una poderosa forma de agregar mapas a su sitio

El uso del complemento MapSVG le brinda una manera de agregar mapas a su sitio con muchas más opciones de personalización que simplemente incrustar un mapa de Google. Si desea que su mapa se vea como un mapa de Google pero incluya las ventanas emergentes y el directorio, puede hacer esto.

Este tutorial ha demostrado una forma de crear un mapa usando el complemento. Para conocer todas sus características y ver cómo puede agregar poderosos mapas personalizados, consulte la documentación.

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.