+34 644 20 61 33 / +52 81 321 81 333 info@laraprado.com

Escrito por Lara Prado

Consultora y Formadora en Marketing Online. Directora en la agencia de marketing online Lanzadera Online.

08.16.2020

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 🙂

Y esto es todo por hoy!

Espero que os sea de utilidad 🙂

Os ha funcionado?

Queréis que veamos otras opciones con la API de Google o plugins a tal efecto?

Cualquier duda o aportación, no dudéis en dejarme un comentario y lo veremos juntos con toda la comunidad!

Y ya sabéis que si necesitáis ayuda o directamente preferís subcontratar esta tarea, podéis contratar mis servicios!

Lara Prado.

Y hasta aquí esta entrada en nuestro blog de marketing online.

¿TE HA SIDO ÚTIL? ¿HA RESUELTO TU PROBLEMA? ¿TE AYUDARÁ EN TU PROYECTO ONLINE?

Si es así…TE RUEGO que por favor contribuyas a nuestra comunidad devolviendo el favor con algunas de las siguientes opciones:

 

Contrata nuestros servicios.

¿Te quedan cosas por hacer en tu proyecto online?

¿Podemos ayudarte en algo más?

Consulta nuestros servicios y precios súper asequibles.

Invítanos a un café.

Igual que a cualquier amigo 🙂

Clica en el icono del café de la esquina o aquí e invítanos a un café virtual con un par de cómodos clics 🙂

Comparte esta entrada.

Ayúdanos a compartir esta entrada en tus redes sociales 🙂

Suscríbete a nuestra newsletter.

Déjanos tu email para enviarte más contenido interesante y gratuito como este.

w

Déjanos un comentario.

Tus comentarios nos dan feedback, ayudan a la comunidad y afectan positivamente a nuestro SEO.

Visita más entradas del blog.

Sigue navegando por nuestra web en cualquiera de nuestras otras entradas del blog.

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *