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:
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:
No obstante, si añades un mapa ahora mismo, verás el siguiente error:
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:
Guarda los cambios, vuelve a tu entrada o página y voilà!, ya tienes tu mapa listo y funcionando:
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.
Nelio Forms
Un plugin de contacto fantástico que usa el editor de bloques. En su simplicidad está la potencia del plugin. Me encanta, es muy versátil y funciona de maravilla para mí.
Wajari Velasquez
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:
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:
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:
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).
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í:
Pero si activamos todos los controles, aparecen los botones alrededor del 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:
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:
Puedes cambiar el lado en el que quieres que dicho cuadro se muestre:
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:
Pues bien, en la barra lateral de configuración del bloque haya una sección llamada Estilo con varios estilos de mapa predefinidos:
Si escoges alguno de esos estilos, verás que el mapa cambia radicalmente de forma:
¿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:
¿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.
Deja una respuesta