En el pasado, agregar un mapa vectorial a un sitio de WordPress ha sido una tarea complicada. Editar archivos vectoriales, usar API o instalar bibliotecas de Javascript: agregar un mapa receptivo se complicó muy rápidamente.
Hubo un pequeño puñado de complementos de mapas, pero ninguno hizo el trabajo sin mucha configuración o, de nuevo, conexiones API. Pero ahora hay un complemento excelente (¡y gratuito!) que hace un hermoso trabajo de mapeo de vectores; se llama Mapas geográficos interactivos .
Crear un mapa de subdivisiones del mundo o un mapa de un país específico con Interactive Geo Maps es fácil. Puede hacerlo en 15 minutos, sin una API ni manipulando scripts adicionales.
Puede personalizar la apariencia de las regiones, agregar información sobre herramientas e incluso agregar direcciones URL a las regiones para que se pueda hacer clic en ellas.
Repasemos los pasos para crear un mapa para que pueda ver cómo funciona.
Instalación del complemento de mapas geográficos interactivos
Nada inusual aquí, solo siga los pasos habituales de instalación del complemento.
Inicie sesión en su panel de administración de WordPress.
En la navegación de la columna izquierda, pase el mouse sobre el enlace «Complementos» y haga clic en el enlace «Agregar nuevo».
En el cuadro «Buscar complementos…», ingrese «Geo Maps interactivos».
Una vez que haya localizado el complemento, haga clic en el botón «Instalar ahora».
Finalmente, haga clic en el botón «Activar».
Uso de mapas geográficos interactivos
Crear un nuevo mapa vectorial solo requiere unos pocos pasos.
- Elegir el mapa
- Definición de las regiones
- Publicando el mapa
Si bien esos son los únicos pasos obligatorios, también agregaremos marcadores para resaltar ubicaciones específicas dentro de una región.
Empecemos.
Crear un nuevo mapa
En la navegación de la columna izquierda, pase el mouse sobre el enlace «Mapas» y haga clic en el enlace «Agregar nuevo».
Dale un título al mapa.
Ahora, elijamos lo que se muestra en nuestro mapa vectorial receptivo.
Seleccione un mapa de la región
De forma predeterminada, el complemento muestra un mapa mundial. Pero hay cientos de mapas disponibles para elegir.
Desplácese hacia abajo en la página «Agregar nuevo mapa» hasta la sección «Configuración del mapa».
Haga clic en el menú desplegable «Mapa para mostrar» para ver los mapas disponibles.
Como notará, hay al menos dos versiones de la mayoría de los mapas, «Alta» y «Baja». Eso se refiere al detalle contenido en la imagen del mapa.
La versión «Alta» del mapa requiere un archivo más grande que la versión «Baja». Entonces, por supuesto, la imagen «Alta» tardará más en cargarse.
Tendrá que decidir cómo equilibrar los detalles y el rendimiento de sus mapas. Un sitio ocupado o un sitio con mucho tráfico móvil se beneficiará al usar los archivos más pequeños («Bajos»).
Para esta demostración, usaré «World Great Lakes Ultra». Los archivos «Ultra» son incluso más grandes que los archivos «Altos», pero como este no es un sitio en vivo, está bien.
Proyección
La configuración de «Proyección» cambia la forma en que se representa el mapa .
La configuración «Miller» es la proyección predeterminada, y la dejaré así por ahora. Pero si prefiere una proyección de Mercator, está disponible, así como AlbersUSA, si está trabajando con un mapa de los Estados Unidos.
Puede agregar una descripción al campo «Descripción» para ayudarlo a realizar un seguimiento de múltiples mapas. Ya que solo estamos haciendo uno, lo dejaré en blanco.
La pestaña Configuración visual
Aquí es donde configura algunas de las opciones de visualización del mapa. Voy a dejar la configuración predeterminada aquí, pero puedes cambiarla:
-
- Color de fondo
- Color de los bordes
- Ancho de los bordes
- Altura del mapa
- Ancho máximo del mapa
- Familia tipográfica
Definición de regiones en el mapa
Ahora viene la parte divertida. Aquí es donde agregamos interactividad al mapa.
Si guardáramos el mapa antes de definir las regiones, sería visible, pero no habría elementos interactivos.
Se ve bien, pero no hace nada cuando pasamos el mouse por encima o hacemos clic. Arreglemos eso.
Haga clic en la pestaña «Regiones».
Verá la lista de valores predeterminados que comienzan con colores de relleno, de desplazamiento y vacíos. Puede cambiar los valores aquí. Voy a dejar los valores predeterminados.
El siguiente valor es «Acción de clic» y vamos a cambiar eso. Controla lo que sucede cuando se hace clic en una región.
Estableceremos la Acción de clic en «Abrir URL (pestaña nueva)», de esa manera podemos agregar URL en las que se puede hacer clic a las regiones.
Los valores predeterminados finales son para incluir o excluir regiones.
Ingresar códigos de región (más sobre ellos en un minuto) en «Incluir regiones» muestra solo esas regiones. El resto del mapa desaparece.
Ingresar códigos de región en «Excluir regiones» elimina esas áreas del mapa por completo.
Por ejemplo, si ingresamos RU en «Excluir regiones», Rusia desaparece de nuestro mapa.
Bien, agreguemos una región
Hay dos formas de agregar una región a nuestro mapa. Podemos hacer clic en el botón “Agregar nueva región” y buscar una, o seleccionar una región de la lista de las disponibles en la columna de la derecha.
Repasemos cada método, y usted puede decidir cuál funciona mejor para usted.
Agregar una región haciendo clic en el botón «Agregar nueva región»
Comience haciendo clic en el botón «Agregar nueva región».
En el campo «Nombre», agregue el nombre de la región.
Comience a escribir el nombre de la región en el campo «Código de la región» y aparecerá la selección de la región.
Aquí estoy escribiendo «Canadá», y ves que la selección de Canadá aparece en verde, que incluye el código de región (CA). Haga clic en el campo verde para agregar el código de país.
Si escribe su región y no aparece ningún código, eso significa que la región no está disponible en el mapa. Pruebe en un área cercana o consulte la lista en la columna de la derecha.
El campo «Contenido de información sobre herramientas» es donde ingresa el texto que desea que se muestre cuando alguien se desplaza sobre la región.
En el campo «Contenido de la acción», puede ingresar una URL que se abrirá cuando se haga clic en la región.
Haga clic en el botón «Agregar nueva región».
Ahora Canadá está activo en nuestro mapa de vista previa, y si pasa el mouse sobre él, puede ver la información sobre herramientas.
Adición de una región haciendo clic en la lista de regiones
La segunda forma de agregar una región es hacer clic en el icono » + » junto a la región en la columna de la derecha. Este es el método que prefiero ya que rellena previamente algunos de los campos.
Entonces, para agregar Suiza, nos desplazaremos hacia abajo hasta que lo encontremos y hagamos clic en el +.
Ahora puede ver que el nombre, el código de región y la información sobre herramientas ya están completos. Puede editar el nombre y la información sobre herramientas, y agregar una URL de acción.
Haga clic en el botón «Agregar nueva región».
Puede continuar agregando regiones usando cualquiera de los métodos.
Agregar zoom al mapa
Después de agregar algunas regiones más, nuestro mapa comienza a verse más completo.
Pero, ¿y si queremos echar un vistazo más de cerca a algunas regiones? No hay función de zoom por defecto, pero es fácil de agregar.
Vaya a la sección Configuración del complemento y haga clic en la pestaña «Características del mapa».
Haga clic en el interruptor «Zoom» para activarlo, luego haga clic en el botón «Guardar».
Ahora cuando vemos el mapa, podemos acercar y alejar.
Agregar marcadores de ubicación
Definir nuestras regiones y agregar texto y enlaces hace que el mapa sea genial. Pero podemos hacerlo aún mejor agregando algunos marcadores de ubicación e información.
En nuestra demostración aquí, he definido algunos países que he visitado, pero ¿cómo podemos agregar también las ciudades?
Hay dos formas de agregar marcadores de ubicación, y ambas se realizan en la pestaña «Marcadores redondos».
Primero, puede hacer clic en el mapa en la «Vista previa del mapa» para establecer un marcador.
Eso es fácil y conveniente, pero no muy preciso.
El segundo método requiere un poco más de esfuerzo, pero lo prefiero por su precisión. Necesitarás la latitud y la longitud de la ubicación.
El complemento recomienda el sitio Buscador de latitud y longitud , así que eso es lo que usaremos.
Agregar ubicaciones será más fácil si abre el sitio del buscador de latitud y longitud en una pestaña separada.
Buscaremos la latitud y la longitud de la ciudad que queremos marcar, luego cambiaremos al complemento.
En la pestaña «Marcadores redondos», haga clic en el botón «Agregar nuevo marcador».
Puede ver que los campos son casi los mismos que cuando agregamos regiones. La única diferencia son los campos adicionales para latitud y longitud.
Agregue un título y, si lo desea, la información sobre herramientas y el contenido de la acción. (Si agrega una URL al contenido de la acción, no olvide configurar la acción de clic en la sección a continuación).
Luego copie y pegue la latitud y la longitud de su búsqueda en el sitio del buscador de latitud y longitud.
Ahora, si guardamos el mapa, vamos a nuestro sitio y hacemos zoom en la región, podemos ver el marcador.
Cambiar la apariencia del marcador
De forma predeterminada, los marcadores son del mismo color que las regiones y el punto me parece un poco grande.
Para establecer un nuevo color de marcador y hacer que el punto del marcador sea más pequeño, cambie los valores predeterminados en la pestaña Marcadores redondos.
Ahora, cuando guardamos el mapa, vamos a nuestro sitio y hacemos zoom en la región, el marcador se destaca de la región.
Puede agregar tantos marcadores como desee.
Tenga en cuenta que puede haber un efecto negativo en la velocidad de carga del mapa cuando se trazan demasiados marcadores.
Cuántos son «demasiados» depende de su sitio, host, etc. , y será diferente para cada sitio web.
Publicar el mapa vectorial
De acuerdo, hemos pasado por mucho aquí juntos, ¿no es así? Ahora es el momento de hacer que nuestro mapa sea visible en nuestro sitio. Como es de esperar a estas alturas, hay un par de formas de hacerlo.
El primer método es copiar el código abreviado del mapa en la página o publicación donde desea que aparezca. El código abreviado se puede encontrar en la página de Mapas:
O la página Editar mapa:
Si usa el editor de WordPress Gutenberg, el complemento crea un bloque.
Puede encontrarlo en la sección «Widgets», se llama «Mapa».
Cuando agrega el bloque, puede seleccionar su mapa en el menú desplegable «Mapa para mostrar».
No hay muchas razones para usar el bloque cuando solo tienes un mapa. Pero si está administrando muchos, puedo ver dónde podría ser útil el menú desplegable.
Qué sucede si desinstala el complemento de mapas geográficos interactivos
Si desinstala el complemento, las páginas y las publicaciones que usaron el complemento se verán afectadas.
-
- Los mapas creados por el complemento se eliminarán.
- Los códigos cortos del complemento dejarán de funcionar, por lo que los códigos cortos en sí se mostrarán en cualquier lugar donde se hayan utilizado.
¿Qué tiene de especial un mapa vectorial?
Las imágenes de mapas vectoriales escalan o cambian de tamaño mejor que otros tipos de archivos de imagen como .jpg o .png. Ese tipo de archivos de imagen se denominan gráficos «ráster». Están formados por píxeles de diferentes colores. Los gráficos vectoriales, como los mapas utilizados por este complemento, se componen de puntos y rutas, como un dibujo de conexión de puntos.
Cuando amplía una imagen de trama, se vuelve borrosa porque está «estirando» los píxeles individuales a un tamaño mayor. Si amplía un JPG de 72 píxeles por pulgada al 200%, esos 72 píxeles no pueden convertirse mágicamente en 144 píxeles. Por lo tanto, la calidad de la imagen se ve comprometida.
Por otro lado, cuando amplía una imagen vectorial, las líneas entre los puntos se vuelven a dibujar, por lo que la imagen se mantiene fluida. Como era de esperar, volver a dibujar tiene un costo. Las imágenes vectoriales utilizan más recursos informáticos para renderizar que las imágenes rasterizadas.
A pesar del coste informático, el formato vectorial es ideal para mapas, logotipos, gráficos, etc., que tienen que adaptarse a tamaños de visualización cambiantes. Los gráficos vectoriales son la forma más confiable de garantizar la calidad de ese tipo de diseños.
¿La palabra final sobre los mapas?
La API de Google Maps ha sido el trazador de mapas de referencia para la mayoría de nosotros durante mucho tiempo. Pero el cambio reciente para requerir una tarjeta de crédito para obtener una clave API tiene a mucha gente buscando alternativas.
Si desea crear un mapa vectorial de forma gratuita en WordPress, el complemento Interactive Geo Maps es la única forma de hacerlo. Se destaca entre los (ciertamente pocos) otros complementos de mapas vectoriales disponibles.
Y ahora que ha visto lo fácil que es usarlo, no hay motivo para que no pueda crear un mapa hoy. Elija su mapa, defina sus regiones y publíquelo. No hay nada más fácil que eso.
¿Alguna vez ha intentado la integración manual de mapas en su sitio web? ¿Ha encontrado alguna otra alternativa a la API de Google Maps que debamos conocer? Házmelo saber en los comentarios.