En este artículo, le mostraré cómo agregar un mapa receptivo de Google Maps a una página web de WordPress (es decir, para una página de contacto) sin usar un complemento. Usaré WordPress 6.0 para este tutorial, así como el tema Twenty Twenty Two, que es el tema predeterminado para esta versión de WordPress.

 La función de Google Maps le permite mostrar la ubicación de su empresa en un mapa interactivo, lo que permite a los visitantes del sitio ver fácilmente dónde se encuentra e interactuar con el mapa para ver qué más hay a su alrededor, obtener direcciones, etc. Demuestra a los visitantes del sitio que eres una empresa local y tienes una ubicación física real. Es muy común que las empresas tengan un mapa en su página de contacto.

Hay toneladas de complementos de Google Maps, pero muchos de ellos son torpes y requieren el pago de las funciones completas del complemento o una cuenta de desarrollador de Google con pasos complicados que producen un resultado menos que deseable.

Habiendo dicho todo esto, hay una manera realmente simple de agregar Google Maps a sus páginas de WordPress 6.0 sin complementos y sin un montón de pasos complicados. Sumerjámonos en ello.

Paso 1: crea un bloque HTML

Para empezar, inicie sesión en el área de administración de su sitio de WordPress y navegue hasta la sección "Páginas" (flecha roja en la imagen de arriba).

Haga clic en la página a la que desea agregar su función de Google Maps (puede hacer clic en el nombre de la página, en mi caso, "Contacto", flecha azul en la imagen de arriba, o simplemente hacer clic en "Editar" debajo del nombre de la página).

Si está utilizando un tema de bloque como Twenty Twenty Two, ahora estará dentro del Editor de bloques para su página. Desplácese hacia abajo hasta la ubicación en la que desea insertar su mapa.

A continuación, haga clic en el icono "+" (el "Block Inserter" - flecha roja en la imagen de arriba) para insertar un bloque.

Busque "Grupo" en el campo de búsqueda (resaltado en verde en la foto) y haga clic para agregar el bloque de grupo (flecha roja). Esto le permitirá agregar algunas configuraciones personalizadas al elemento de bloque.

Por ejemplo, haga clic en la opción "Cambiar alineación" (flecha roja) y seleccione "Ancho completo" (flecha verde). Esto hará que el ancho del bloque que contendrá nuestro mapa interactivo de Google Maps sea de ancho completo.

A continuación, haga clic en el botón grande "+" dentro del grupo (flecha roja en la foto de arriba). Busque "HTML" en la barra de búsqueda (resaltado en verde) y haga clic en el bloque "HTML personalizado" (flecha azul).

Verás que ahora dice "Escribir html..." (flecha roja). Aquí es donde agregaremos nuestro mapa.

Paso 2: generar HTML incrustado de Google Maps

Ahora necesitaremos generar nuestro mapa con Google Maps. Para hacer esto, abra una nueva pestaña del navegador y vaya a Google.com si no es su navegador de búsqueda predeterminado.

A continuación, escriba la dirección que desea mostrar en su mapa. Para este ejemplo, usaré el Empire State Building (flecha roja). Puede usar la dirección exacta de su empresa para esta parte (es decir, número de calle, calle, ciudad, estado y código postal, o lo que escriba para direcciones internacionales si no se encuentra en los EE. UU.).

Haga clic en la imagen del mapa que aparece para su dirección en la página de resultados del motor de búsqueda (flecha roja en la imagen; estará en el medio de la página o a la derecha, dependiendo de si ingresó una dirección o el nombre de un lugar, como yo lo hice).

Su dirección ahora aparecerá como un marcador en el mapa de pantalla completa (flecha roja en la imagen de arriba). También verá varios íconos debajo de la dirección o el título del lugar que buscó. Estos íconos incluyen "Direcciones", "Guardar", "Cerca", "Enviar al teléfono" y "Compartir". Haga clic en el icono "Compartir" (flecha azul).

En la pestaña "Compartir" que aparece, haga clic en la pestaña "Incrustar un mapa" (flecha azul en la foto de arriba).  

En esta pestaña, verá una vista previa de su widget de Google Maps incrustado. Hay un menú desplegable de tamaño en el lado izquierdo del código (flecha verde): puede seleccionar un tamaño prefabricado o elegir "Personalizar" para establecer su propio tamaño. Seleccionaré la opción "Personalizado" (flecha roja).

Aquí verás las dimensiones de mi mapa personalizado. Estableceré la altura, o la primera dimensión, en 1200 (flecha roja). Dejaré el ancho establecido en 600. Puede hacer clic en "Vista previa del tamaño real" (flecha verde) para mostrar el mapa en una nueva ventana emergente en tamaño completo (asegúrese de desactivar los bloqueadores de ventanas emergentes si los tiene). encendido para evitar bloquear la ventana). Salga de la ventana de vista previa una vez que haya terminado.

A continuación, haga clic en el enlace "Copiar HTML" (flecha azul). Este es el código que traeremos a nuestra página de WordPress.

Paso 3: Pegue el código HTML en la página de WordPress

Vuelva a la pestaña del navegador que contiene su sitio web de WordPress. Haz clic en el bloque HTML vacío donde dice "Escribe HTML aquí..." y pega el código (flecha roja) presionando ctrl+v en tu teclado (cmd+v en una Mac).

Si hace clic en la opción "Vista previa" en la barra de herramientas de bloque (flecha roja), ahora verá su mapa en su página (flecha verde). Vuelva a hacer clic en la opción "HTML" para volver al código HTML (flecha azul).

Tenemos nuestro mapa incrustado en nuestra página, pero no responde, lo que significa que si vemos el mapa en una pantalla más pequeña, como una tableta o un teléfono, no ajustará su tamaño para que quepa en la pantalla. Para solucionar esto, debemos agregar un estilo personalizado al código HTML.

Paso 4: haga que Google Maps sea receptivo

Seré usando el código que obtuve de este sitio web para hacer que la inserción de Google Maps responda. Desplácese hacia abajo hasta la sección denominada "Cómo incrustar Google Maps de forma receptiva" (flecha roja). Luego, desplácese hacia abajo hasta el segundo conjunto de códigos (flecha azul).

Copie todo de “ ”  to “” by highlighting the code with your mouse and hitting ctrl+c on your keyboard (cmd+c on a MAC – red arrow in the image above).

Vuelva a navegar a WordPress. Haga clic con el mouse en la parte frontal del código HTML para insertar este nuevo código al principio (flecha roja). Presiona ctrl+v para pegar tu código.

Finalmente, haga clic al final del código HTML (flecha roja) y escriba " ” para cerrar todo. Básicamente, lo que acaba de hacer es envolver su código HTML con un estilo personalizado. Este estilo le dice al navegador del visitante que cambie el tamaño del mapa según el tamaño de la ventana en la que lo está viendo.

Paso 5: ajuste la relación de aspecto del mapa interactivo

Hay una última cosa que debemos hacer: desplácese hacia atrás hasta la parte superior del código hasta que vea "padding-bottom: 75%;" (flecha roja). Este fragmento de código determina la relación de aspecto del mapa.

Debido a que cambié el tamaño de mi mapa a 1200 x 600, tiene una relación de aspecto de 2:1. Para esto, necesito cambiar el porcentaje a "50%" (flecha roja).

Si no está seguro de qué porcentaje debe usar para su mapa, simplemente tome la relación de aspecto (es decir, 16:9) y divida el segundo número por el primero para obtener su porcentaje (9 dividido por 16 es 56.25%).

Haga clic en "Actualizar" para aplicar sus cambios (flecha azul en la imagen de arriba), luego haga clic en "Ver página" en la esquina inferior izquierda para ver el resultado.

Ahora debería ver su widget de Google Maps (flecha roja en la imagen de arriba).

Puede probar la capacidad de respuesta reduciendo el tamaño de su navegador y luego desplazándose hacia atrás al área de la página web que tiene el mapa.

¡Eso es todo por este tutorial! Si te ha gustado y quieres aprender a hacer tu propio sitio web profesional de WordPress desde cero, puedes inscribirte en mi Curso de WordPress 6.0 para no programadores en Udemy, o echa un vistazo a mis otros tutoriales!

El pin en Pinterest