MAPA INTERACTIVO CON ZONAS O ÁREAS 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.

No obstante, hay negocios que se desplazan a ciertas áreas geográficas, y a veces es muy interesante ofrecer un mapa interactivo donde el cliente pueda entender si su dirección entra del servicio de reparto o no. 

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 CON LA ZONA DE REPARTO DESTACADA de Google insertando en la web código obtenido directamente de Google Maps.

Veremos el ejemplo práctico con una nueva web que estoy haciendo, de la empresa extremeña Ibergasóleos. Ibergasóleos es una empresa muy potente de distribución de gasóleos a domicilio, y el cliente me ha pedido que mostremos en la web las zonas a las que llegan con su distribución. 

PASO 1. ACCEDE AL EDITOR DE MAPAS DE GOOGLE MAPS

Para la creación del mapa específico, tenemos que acceder al creador de mapas de Google Maps.

Una vez dentro, clicaremos en el botón rojo de CREAR UN NUEVO MAPA.

PASO 2. UBICA EL NEGOCIO EN EL MAPA

Inserta la dirección del negocio en el mapa, y asegúrate de que toda la zona de reparto o área de distribución está incluída en la visión del mapa, ajustando si es necesario con el zoom. 

PASO 3. ACTIVA LA EDICIÓN MEDIANTE LÍNEAS

Clica en el iconito de edición (el que parece un triángulo sin cerrar), y selecciona AÑADIR LÍNEA O FORMA.

PASO 4. DIBUJA LA ZONA DE ACTUACIÓN

Limita el área de tu interés punto a punto, haciendo clic con el ratón en cada vértice. Haz tantos clics como sean necesarios, y no te preocupes, si te equivocas no hace falta que empieces de nuevo, puedes mover los puntos más tarde.

Cuando hayas terminado de cerrar el polígono, aparecerá un cuadro de diálogo, donde podrás ponerle un nombre y clicar en GUARDAR.

PASO 5. CONFIGURA EL MAPA COMO PÚBLICO

Si lo compartimos tal cual, viene configurado por defecto como mapa privado. Por lo que antes de insertarlo en la web, debemos cambiar la configuración a público/accesible.

Para ello, clicaremos en COMPARTIR > CAMBIAR A CUALQUIER PERSONA CON ENLACE.

PASO 6. EMBEBE EL MAPA EN TU WEB CON EL MÓDULO DE CÓDIGO DE DIVI

Ya tenemos el mapa, con área de reparto dibujado. Ahora lo obtendremos vía código y lo insertaremos en nuestra web con el módulo de código de Divi.

Copiaremos el código, y lo meteremos en nuestra web donde queramos con el módulo de código de Divi.

Si queréis, podéis editar las medidas y proporciones en el mismo código, con los valores ancho y alto que queráis 🙂

Y ya tenemos nuestro mapa interactivo con zona de reparto incluída en nuestra web en Divi!

Yo además, como creo que voy a poner todas las fotos de la web en blanco y negro, le he dado una capita de color blanquinegra para que no destaque demasiado visualmente 🙂