Seleccionar página

Seguramente has pensado en añadir un mapa de Google (Google Maps) a la página de contacto de tu web. Es algo fundamental para que te puedan localizar.

Si estás utilizando WordPress, seguramente te preguntarás si necesitas algún plugin, constructor o plantilla específica para poder insertar Google Maps. Pues no es necesario. Aunque existen plugins, elementos de constructores y plantillas para hacerlo, se puede también insertar un mapa de Google Maps en WordPress directamente vía HTML.

Eso mismo es lo que te voy a explicar en este post. Cómo puedes insertar o añadir un mapa de Google en tu WordPress sin plugins ni page builders.

Sí, me voy a centrar en WordPress. Pero, ya te indico este método te puede servir también aunque no utilices WordPress. Simplemente tendrás que ver si tu aplicación te permite añadir HTML.

 

 

 

DISFRUTA DE TODOS MIS CURSOS PREMIUM POR SOLO 10€/MES


VER CURSOS

 

 

Vídeo del proceso para insertar un mapa en WordPress sin plugins

 

En primer lugar te dejo un vídeo del proceso, y más abajo el post con todos los detalles a través de imágenes y texto.

 

 

Cómo añadir un Mapa de Google Maps en WordPress vía HTML (Sin plugins, sin constructores ni plantillas)

 

Este procedimiento te sirve para WordPress y para otros CMS. Utilizando este procedimiento para insertar un Mapa de Google en WordPress no te hará falta ningún plugin o plantilla determinada, lo que haremos será simplemente insertar el código HTML que nos aporta Google Maps.

Puedes localizar tu ubicación introduciendo la dirección exacta en Google Maps o a través de una ficha de empresa de Google My business.

Si quieres mostrar la localización de tu empresa y que aparezca el nombre de la misma y el resto de datos en una ficha lateral tendrás que crear previamente una ficha de empresa de Google My Business

Vamos a ver el proceso paso a paso para insertar un Google Map en WordPress vía HTML:

 

👉 i.- Abre Google Maps: ve a google y busca «Google Maps» o accede directamente a esta url para ir a Google Maps

 

👉 ii.- Localización: si tienes ficha de Google My Business introduce el nombre de tu empresa en la barra que dice «Buscar en google maps» para que se te muestre la ficha de tu empresa en el lateral de Google maps. Si no tienes ficha de Google My Business introduce la dirección de tu negocio (calle, número y código postal) y te aparecerá igualmente en el lateral una ficha con la dirección introducida.

 

mostrar mapa google en wordpress, buscar en google maps empresa

 

👉 iii.- Compartir: en la ficha de localización que te aparece a la izquierda de Google Maps, haz clic en el icono “Compartir”.

 

compartir mapa google maps en wordpress

 

👉 iv.- Insertar un mapa: haz clic en la pestaña “Insertar un mapa”.

 

👉 v.- Tamaño del mapa: en la izquierda verás un selector en el que podrás seleccionar el tamaño del mapa con las opciones: pequeño, mediano, grande y tamaño personalizado. Selecciona el tamaño que quieras.

 

tamaño mapa a insertar en wordpress

 

👉 vi.- Copia el código: Haz clic en “Copiar HTML”.

 

👉 vii.- Pegar código: ve a tu wordpress y pega el código donde quieres que se muestre el mapa:

a.- Gutenberg: Si usas Gutenberg puedes insertar el código en un bloque “Clásico”, pero ten en cuenta que después de insertar el bloque has de hacer clic en los tres puntos y seleccionar “Editar como HTML” una vez pegado el código y guardada la página puedes, si quieres, volver al estado normal haciendo clic otra vez en los tres puntos y seleccionar “Editar visualmente”.

 

Insertar codigo html de google maps en editor gutenberg

 

b.- Editar Clásico: si usas el editor clásico debes primero hacer clic en la pestaña “HTML” o “TEXTO” del editor y después pegar el código.

 

insertar codigo google maps en editor clasico wordpress

 

c.- Divi: si usas el constructor de la plantilla Divi, puedes usar el “módulo Código” o el “módulo Texto” (en este último caso tendiendo la precaución de hacer clic en la pestaña “Texto” del editor antes de pegar el código)

 

insertar código google maps en wordpress con Divi

 

d.- Elementor: Si usas Elementor para la creación de páginas puede utilizar el “widget HTML” o el “widget Editor de texto” (en este último caso tendiendo la precaución de hacer clic en la pestaña “HTML” del editor antes de pegar el código)

 

insertar código html google maps en wordpress con Elementor

 

Si no usas wordpress habrás de buscar una opción a través de la que puedas añadir código HTML en la creación de tus páginas para insertar el código y que se muestre el mapa.

 

 

Compártelo ya!!

▷LLÉVATE TODOS ESTOS RECURSOS GRATIS

 

LLEVATE GRATIS:

 

👉 CURSO WORDPRESS Y DIVI (24 Clases en vídeo)

 

👉 MASTER CLASS: Claves para crear una web que consiga clientes

 

👉 TALLER SEO: Keyword research + 👉 Guía para crear una web profesional + 👉 Training Mis plugins imprescindibles

Consentimiento

Vé a tu buzón de correo y confirma la suscripción. Si no encuentras el correo de confirmación mira en la carpeta de SPAM.

Abrir chat
¿Dudas sobre mis cursos o servicios?
🙋🏻‍♂️** ¿Alguna duda sobre mis cursos o servicios? Soy Joaquín, cuéntame y te ayudo encantado
**Accede a TODOS mis cursos por solo 10 €/mes desde cursotiendaonline.com