Si diriges un negocio, una organización, un evento o simplemente necesitas mostrar un mapa por cualquier otro motivo, puede ser útil saber cómo añadir Google Maps a WordPress.

Es más, con el plugin adecuado, puedes incluso crear mapas personalizados e interactivos que muestren mejor tu ubicación física u otra información importante.

En esta guía, te presentaremos el plugin Otter Blocks, una herramienta excelente y fácil de usar para principiantes. Luego te mostraremos cómo utilizarlo para añadir Google Maps a WordPress. ¡Vamos a echar un vistazo!

Presentación del bloque de Google Maps de Otter Blocks

Bloques Gutenberg y Biblioteca de Plantillas de OtterBloques Gutenberg y Biblioteca de Plantillas de Otter

Autor(es): ThemeIsle

Versión actual: 1.6.2

Última actualización: 26 de marzo de 2021

otter-blocks.zip

La forma más fácil de añadir Google Maps a WordPress es utilizar el plugin adecuado, como Otter Blocks. Themeisle construyó este plugin para ayudar a los usuarios a crear y personalizar rápidamente mapas para satisfacer sus necesidades. El potente constructor de mapas de la interfaz de usuario le permite crear tantos mapas como desee, así como guardar, editar e incluso clonarlos.

Características principales:

  • Personalizar muchos elementos de sus mapas, incluyendo la posición, el nivel de zoom, y mucho más.
  • Estiliza tus mapas a través de esquemas de color y otras opciones.
  • Añade múltiples ubicaciones y marcadores a tus mapas.
  • Organiza fácilmente una biblioteca de tus mapas.
  • Precio: Otter Blocks es gratuito.

    Cómo añadir Google Maps a WordPress (en 3 pasos)

    Ahora, te mostraremos cómo crear un mapa para tu sitio web. En primer lugar, deberás instalar Otter Blocks en tu sitio de WordPress como lo harías con cualquier otro plugin. A continuación, sólo tienes que seguir los siguientes pasos para añadir Google Maps a WordPress

    Paso 1: Añade tu clave de la API de Google Maps a WordPress

    Una vez que hayas instalado Otter Blocks, habrá una nueva sección llamada Otter bajo la pestaña de Configuración en tu panel de control. Cuando la visites, deberías ver una sección de Mapas con una casilla para tu clave de API, que debe ser añadida antes de empezar a crear mapas:

    Otter Blocks Google Maps API and Settings

    Para obtener esta clave, visita el panel de APIs de Google. Suponiendo que ya tienes una cuenta de Google, deberías poder acceder a este tablero sin necesidad de registrarte en nada.

    Dentro del panel de control de las API de Google, selecciona el botón azul Crear proyecto, situado en la parte superior de la página:

    Botón para crear un proyecto para Google Maps.

    Elige Crear en la siguiente pantalla. A continuación, podrás elegir un nombre para tu proyecto:

    Crear un proyecto de Google Maps.

    Haz clic en Crear una vez más, y volverás al panel de control. Selecciona Habilitar API y servicios cerca de la parte superior de la pantalla y busca en la biblioteca de API «Google Maps JavaScript API». Una vez que la hayas encontrado, selecciona Habilitar:

    Botón para habilitar la API de Google Maps.

    En la siguiente pantalla, haz clic en el botón Crear credenciales en la esquina superior derecha.

    En la siguiente página, selecciona ¿Qué credenciales necesito? Se te presentará una clave de API, que ahora puedes copiar.

    Clave API de Google Maps

    Vuelve a tu sitio de WordPress y pega la clave en el cuadro Clave API de Google Maps:

    Añadir la API de Google Maps a WordPress

    ¡No olvides guardar los cambios! Ahora, estás listo para empezar a construir tu mapa.

    Paso 2: Crear un nuevo mapa

    Para crear tu primer mapa, selecciona el bloque de Google Maps en la sección de Nutrición. Inmediatamente te aparecerán un montón de opciones:

    Opciones del bloque de Google Maps en Otter Blocks

    Lo primero que probablemente querrás hacer es seleccionar el botón Añadir marcador. Esto le permite determinar una ubicación para el mapa y colocar un marcador. Puedes darle un título al marcador, elegir un estilo para él e introducir una dirección:

    Las opciones del marcador del mapa.

    En el cuadro de texto, también puedes añadir y dar formato al texto que se mostrará cuando el usuario haga clic en el marcador:

    Un ejemplo de marcador de mapa.

    Después de esto, puedes empezar a personalizar tu mapa usando algunas de las otras opciones dentro del constructor de mapas. Vamos a recorrer cada pestaña una por una.

    Posicionamiento & Zoom

    Para establecer un determinado nivel de zoom y posición para tu mapa, puedes simplemente acercar y alejar el mapa de muestra y arrastrarlo donde quieras. La forma en que lo configures en el editor es la forma en que se mostrará en tu sitio.

    También puedes cambiar el tipo de mapa, desde terreno, satélite, carretera o híbrido.

    Controles

    La pestaña de controles.

    En la sección Controles, puedes decidir qué tipo de opciones están disponibles para los usuarios. Esto incluye si pueden arrastrar el mapa y si tienen una opción de vista de calle.

    Estilos

    En la sección Estilos, puedes ajustar el aspecto de tu mapa. También puedes elegir entre varios estilos de mapa predefinidos o incluso crear los tuyos propios.

    Sin embargo, ajustando los parámetros anteriores, deberías ser capaz de crear un mapa que sea elegante y útil para tus visitantes.

    Paso 3: Coloca el mapa en tu sitio

    Una vez que tu mapa esté ajustado a la perfección, no olvides guardarlo. Una vez que lo hagas, verás que aparece en la página, junto con los botones para ajustar el ancho, cambiar los estilos o eliminar el mapa.

    La configuración del mapa en Otter Blocks

    ¡Pulsa publicar y ya está! Tu mapa se mostrará ahora perfectamente en el front end de tu sitio:

    Un mapa en un sitio web.

    Puedes utilizar este método para colocar el mismo mapa en varios lugares o incluso añadir una variedad de mapas a tu sitio. Eso es todo lo que se necesita para añadir Google Maps a WordPress.

    Conclusión

    «Mostrar, no contar» es una regla inteligente que debes seguir en tu sitio web. Incluir un mapa, por ejemplo, muestra a los visitantes exactamente cómo su negocio u organización encaja en su comunidad. Los mapas son una forma más convincente de animar a la gente a visitar su ubicación física que simplemente proporcionar una dirección – especialmente cuando son interactivos.

    Para aprovechar esta técnica en su propio sitio, puede utilizar el plugin Otter Blocks para añadir Google Maps a WordPress. Sólo tienes que seguir estos tres pasos:

  1. Agrega tu clave de la API de Google Maps a WordPress.
  2. Crea un nuevo mapa y configúralo usando los ajustes del plugin.
  3. Coloca el mapa en tu sitio usando el shortcode proporcionado.

.

Categorías: Articles

0 comentarios

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *