Cómo insertar un mapa de Google Maps en WordPress sin plugins, sin constructor, sin plantilla Solo con HTML

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.

 

 

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

 

 

👉 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.

 

 

👉 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”.

 

 

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.

 

 

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)

 

 

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)

 

 

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.