MAPA INTERACTIVO EN TU SITIO WEB: POR QUÉ LO NECESITAS.

Añadir un mapa interactivo a tu web es una gran manera de:

• mostrar tu ubicación y ayudar a posibles clientes a encontrar tu sede u oficinas,
• además de darte reputación online al mostrar que tu negocio online está respaldado por una sede física y
• además te ayuda con el SEO local.

Hay varias maneras de insertar tu mapa de Google Maps o Google My Business en tu web hecha con WordPress / WooCommerce usando el editor Divi, y aquí vamos a ver algunas de ellas.

Básicamente hay que tener en cuenta si se quiere trabajar con la API de Google Maps o no, y si se quiere hacer con código o con plugins.

En la entrada de hoy, vamos a ver la más rápida y sencilla de todas: embeber un mapa totalmente interactivo de Google insertando en la web código obtenido directamente de Google Maps. 

PASO 1. ABRE LA UBICACIÓN DEL NEGOCIO EN GOOGLE MAPS

Para esta entrada, estoy añadiendo el mapa de una de mis clientas favoritas, Mari Carmen de la Lonja 77 en Almendralejo. Se trata de una tienda gourmet y tapería en el centro de la ciudad, que si podéis, deberíais visitar! 🙂

Lo primero que haremos, será buscar la localización en Google Maps.

PASO 2. EDITA VISUALMENTE EL MAPA

Lo siguiente que haremos será hacer zoom y mover el mapa hasta dejarlo como lo queramos exactamente.

En mi caso he hecho un poquito de zoom, para que se aprecie en qué zona está de Almendralejo, sin perder la perspectiva dentro de la ciudad, y luego lo he centrado.

PASO 3. OBTÉN EL CÓDIGO HTML

Lo primero que haremos será cliar en COMPARTIR,  de entre las opciones de la izquierda.

Se nos abrirá entonces una ventana con opciones para compartir dicho mapa.

La clave de todo es irnos a la segunda pestaña, donde dice INSERTAR UN MAPA, y copiaremos el código HTML generado. 

Recuerda que el mapa aparecerá exactamente igual que en esta previsualización, por lo que recuerda ajustarlo lo necesitario hasta que esté visualmente como tú quieras. 

PASO 4. INSERTA EL CÓDIGO CON UN MÓDULO DE CÓDIGO EN DIVI

Lo siguiente que haremos será irnos a la web, e insertar dicho código en un módulo de código de Divi.

En mi caso, quiero ponerlo a anchura completa en la página de contacto de mi clienta.

Esta es la página de contacto actual:

Pues bien, vamos a añadir una sección de ancho completo entre el formulario y el feed de Instagram, y en dicha sección, un módulo de código, donde pegaré el código HTML generado en Google Maps.

Seleccionaremos el módulo CÓDIGO DE ANCHURA COMPLETA.

Y como podéis ver, pese a que el módulo es de anchura completa, el mapa se ha insertado con forma casi cuadrada.

Lo único que tendremos que hacer será tocar a mano el código, cambiar el WIDTH de 600 a 1920.

Y aquí podéis ver cómo nos queda la página de contacto de LA LONJA 77 con su mapa 100% interactivo y a anchura completa: