Nelio Maps: el nuevo plugin de Nelio para insertar Mapas de Google en Gutenberg

Publicada en WordPress.

Hoy te traigo buenas noticias: ¡la semana pasada publicamos un nuevo plugin en WordPress.org!

Nelio Maps permite añadir un mapa de Google como bloque en el editor de WordPress. Es el primer plugin que hemos creado 100% para Gutenberg y confiamos en que su sencillez y eficiencia convenza a sus usuarios.

En esta entrada voy a presentarte un poco el plugin en cuestión y te enseñaré cómo puedes usar Nelio Maps para insertar mapas de Google totalmente personalizados en tu web. Y si eres desarrollador, prepárate, porque en un par de semanas te explicaré en detalle cómo hemos implementado este plugin en Nelio.

Instalación de Nelio Maps

Lo primero que debes hacer para poder usar el nuevo plugin de Nelio es instalarlo en tu WordPress. Me alegra comunicarte que este plugin es 100% gratuito, así que bastará con que lo busques desde el propio escritorio de WordPress y que lo instales y actives como siempre:

Instalación de Nelio Maps
La instalación de Nelio Maps sigue el mismo procedimiento que la de cualquier otro plugin.

Una vez lo hayas hecho, podrás ir al editor de WordPress y añadir el nuevo bloque de Mapa de Google que aparece en la sección Extra:

Nuevo tipo de bloque: Mapa de Google
Después de instalar y activar Nelio Maps, aparece un nuevo tipo de bloque en tu editor WordPress.

No obstante, si añades un mapa ahora mismo, verás el siguiente error:

Mensaje de aviso cuando no hay una API key disponible
Mensaje de aviso que se muestra al usuario cuando no hay una API key disponible.

y es que, para que el mapa funcione, necesitarás configurar una API Key de Google Maps.

Cómo añadir una API Key de Google a Nelio Maps

Para poder usar Google Maps en tu WordPress necesitas una API Key que te dé acceso a la API de mapas de Google. Por suerte, precisamente antes de ayer Antonio nos explicaba cómo conseguir una API Key de Google, así que simplemente sigue sus explicaciones para conseguir tu llave y pégala en la opción llamada nelio_maps_api_key_option:

Opción para meter la API key
Cómo añadir la API key desde los ajustes de WordPress.

Guarda los cambios, vuelve a tu entrada o página y voilà!, ya tienes tu mapa listo y funcionando:

Apariencia de un mapa de Google por defecto
Cuando añades un mapa de Google a WordPress con Nelio Maps, la apariencia del mapa por defecto es la de Google Maps, con la paleta color pastel en grises, verdes y azules.

Cómo configurar el mapa de Google con Nelio Maps

Nelio Maps permite personalizar varios aspectos del mapa de Google que acabas de añadir. Para ayudarte a familiarizarte con el plugin, permíteme que te explique brevemente todos los ajustes que incluye y te enseñe para qué sirven y cómo usarlos.

Cómo centrar el mapa en un punto concreto

Lo primero que debes saber es que puedes centrar el mapa en el punto que a ti te dé la gana. Para centrar el mapa tienes dos opciones: o bien arrastras el mapa con el ratón y lo mueves hasta que se vea lo que tú quieres, o bien estableces el punto exacto usando el cuadro de búsqueda de ubicaciones:

Búsqueda de ubicaciones integrada en WordPress
Con la búsqueda de ubicaciones integrada, puedes buscar cualquier negocio o dirección sin salir del editor de bloques y centrar el mapa en el punto concreto que quieras.

Cómo modificar el tamaño del mapa y su nivel de zoom

Otra opción que permite realizar el plugin es cambiar el tamaño del mapa. En este sentido, puedes manipular el alto del mapa para que ocupe entre un 20% y el 100% del tamaño de tu pantalla. Para ello, selecciona el bloque y accede a los ajustes del bloque que aparecen en la barra lateral derecha de Gutenberg:

Ajustes básicos del mapa de Nelio
Ajustes básicos del bloque de mapas de Nelio Maps. Escoge el tamaño y el nivel de zoom con estos dos selectores.

Por otro lado, puedes cambiar el ancho del bloque usando los controles habituales de alineación que ya existen en otros bloques. En concreto, tienes tres ajustes disponibles: Alineación centrada, Ancho amplio y Ancho completo:

Alineación de un mapa
Nelio Maps permite usar diferentes alineaciones para tu mapa, con lo que el tamaño que este ocupa en pantalla puede adaptarse a tus necesidades.

Finalmente, comentarte que Nelio Maps también permite cambiar el nivel de zoom que quieres que el mapa tenga por defecto. Tal y como debes haber intuido por las capturas anteriores, existen dos formas de hacerlo: o bien usas el control Nivel de zoom de la barra lateral, o bien usas los botones del propio mapa.

Cómo seleccionar qué controles están disponibles en el mapa

En la barra lateral de controles del bloque, hay una sección llamada Opciones del mapa. Allí encontrarás varias opciones para configurar qué controles debe mostrar el mapa y cuál debe ser su comportamiento. Los ajustes que incluye son:

  • Mostrar los botones de zoom (para que el visitante pueda cambiar el nivel de zoom del mapa)
  • Mostrar el botón de tipo de mapa (para cambiar entre vista de Mapa y vista por Satélite)
  • Mostrar el botón de pantalla completa (para permitir que el mapa ocupe toda la pantalla)
  • Hacer que el mapa se pueda arrastrar (para permitir que el usuario pueda cambiar qué parte del globo ve).
Botones del mapa
Configura qué botones del mapa estarán visibles en el front-end.

Si modificas cualquiera de los valores, verás que el mapa del editor de bloques se mantiene constante. Esto es debido a que estos ajustes únicamente modifican la apariencia del mapa en el front-end de tu web.

Con las opciones por defecto (es decir, todas las opciones desactivadas), el mapa se vería así:

Vista por defecto del mapa en el front-end
Vista por defecto del mapa en el front-end, sin ningún control adicional en el mismo (todo está fijo con la configuración que hayas establecido en el editor).

Pero si activamos todos los controles, aparecen los botones alrededor del mapa:

Mapa con controles
Si activas los diferentes controles, el usuario podrá interactuar con el mapa.

Cómo añadir un marcador en el mapa

Cuando añadimos un mapa en nuestra web, es habitual que queramos señalizar algún punto importante en el mismo. Nelio Maps permite añadir un marcador a nuestro mapa de forma muy sencilla. Simplemente expande la sección Marcador de la barra lateral y activa la opción Marcador en el mapa:

Cómo añadir un marcador al mapa
El bloque permite añadir un marcador al mapa para así señalizar algún punto en concreto del mismo.

Una vez hayas añadido el marcador en el mapa, podrás cambiar su ubicación usando el cuadro de búsqueda que aparece en la captura anterior.

Por otro lado, fíjate que hay una opción adicional llamada Bloque de dirección. Se trata de un pequeño cuadro de texto en el que puedes añadir información adicional sobre tu marcador. Por ejemplo, podrías usarla para compartir la dirección exacta que señala el marcador y complementarla con información de contacto:

Información adicional del marcador
Cuando activas el marcador, tienes la posibilidad de escribir información adicional sobre el mismo en el cuadro de texto que se superpone al mapa.

Puedes cambiar el lado en el que quieres que dicho cuadro se muestre:

Alineación del cuadro de texto del marcador
Puedes cambiar fácilmente la alineación del cuadro de texto del marcador.

o incluso hacerlo desaparecer por completo, si no quieres usarlo.

Cómo cambiar el estilo del mapa

Finalmente, Nelio Maps incluye una opción fantástica para personalizar totalmente la apariencia del mapa. Por defecto, el mapa tiene el estilo de Google habitual, con su paleta de colores típica y tal:

Apariencia de un mapa de Google por defecto
Cuando añades un mapa de Google a WordPress con Nelio Maps, la apariencia del mapa por defecto es la de Google Maps, con la paleta color pastel en grises, verdes y azules.

Pues bien, en la barra lateral de configuración del bloque haya una sección llamada Estilo con varios estilos de mapa predefinidos:

Estilos de Google Maps
Puedes cambiar la apariencia del mapa usando la sección de Estilos en la configuración del bloque.

Si escoges alguno de esos estilos, verás que el mapa cambia radicalmente de forma:

Captura de pantalla de Nelio Maps
Captura de pantalla del bloque de mapas de Nelio Maps, aplicándole el estilo Claro.

¿Y sabes qué es lo mejor? Con Nelio Maps no tienes por qué usar alguno de los estilos predefinidos; existe una opción para que tú mismo crees el estilo que te dé la gana:

Estilo personalizado de mapa en Nelio Maps
Además de los 5 estilos por defecto incluidos en el bloque, existe la posibilidad de añadir tu propio estilo del mapa usando un JSON.

¿Te apetece usarlo?

Así que, dime, ¿qué te parece el plugin? ¿Te gusta? ¿Tienes alguna sugerencia que te gustaría hacernos llegar? Tanto si te parece el mejor plugin del mundo como si crees que es mejorable, por favor déjanos tu opinión en la sección de comentarios y así veremos cómo podemos hacer que Nelio Maps sea el mejor y más sencillo plugin de mapas para Gutenberg.

Imagen destacada de Anna Pascale en Unsplash.

FlojaNo está malBienMuy bien¡Impecable! (1 votos, promedio: 5,00 de 5)
Cargando…

2 comentarios en «Nelio Maps: el nuevo plugin de Nelio para insertar Mapas de Google en Gutenberg»

Deja un comentario

No publicaremos tu correo electrónico. Los campos obligatorios están marcados con: •

He leído y acepto la Política de privacidad de Nelio Software

Al marcar la casilla de aceptación estás dando tu legítimo consentimiento para que tu información personal se almacene en SiteGround y sea usada por Nelio Software con el propósito único de publicar aquí este comentario. Contáctanos para corregir, limitar, eliminar o acceder a tu información.