Integrar Google Maps en un sitio web de Sitebuilder

Integrar Google Maps en un sitio web de Sitebuilder

Un mapa interactivo en tu sitio web ayuda a los visitantes a encontrar tu ubicación y genera confianza. Con la integración de Google Maps en Sitebuilder muestras fácilmente tu dirección, la ruta para llegar y tu horario de apertura de forma profesional.

Por qué añadir Google Maps

Un mapa en tu sitio web ofrece muchas ventajas:

• Los visitantes encuentran más fácilmente el camino hasta tu ubicación
• Refuerza la visibilidad local en Google
• Imagen profesional para las empresas con ubicación física
• Los clientes pueden planificar una ruta directamente
• Muestra varias ubicaciones en un mapa (práctico para las cadenas)

Añadir un mapa a tu sitio web

Paso 1: Colocar el bloque de mapa

1. Abre la página en la que quieres mostrar el mapa
2. Haz clic en el icono del signo más para añadir un elemento
3. Busca Mapa o Google Maps entre los elementos
4. Arrastra el bloque de mapa a la posición que quieras

Paso 2: Configurar la ubicación

1. Haz clic en el bloque de mapa
2. Abre los Ajustes
3. Escribe tu dirección:
   • Nombre de la calle y número
   • Código postal
   • Localidad
4. Haz clic en Buscar para encontrar la ubicación
5. Comprueba que el pin esté en el lugar correcto

Paso 3: Ajustar la vista del mapa

Adapta el aspecto a tu sitio web:

Nivel de zoom

• Elige con cuánto zoom se abre el mapa
• Cerca (nivel de calle) o más lejos (nivel de ciudad)

Tipo de mapa

• Mapa de carreteras: Mapa de calles estándar
• Satélite: Fotos aéreas
• Terreno: Curvas de nivel y elementos naturales
• Híbrido: Satélite con nombres de calles

Personalizar el marcador

Puedes personalizar el marcador rojo estándar para que destaque.

Subir un marcador personalizado

1. Selecciona el mapa
2. Ve a Ajustes del marcador
3. Haz clic en Subir marcador propio
4. Sube tu logotipo o icono (se recomienda PNG)
5. Ajusta el tamaño

Ventana de información del marcador

Añade información que aparezca al hacer clic en el marcador:

1. Haz clic en Editar ventana de información
2. Añade:
   • Nombre de la empresa
   • Dirección
   • Número de teléfono
   • Horario de apertura
   • Enlace a la ruta
3. Da a la ventana el estilo que quieras

Opciones avanzadas

Mostrar varias ubicaciones

¿Tienes varias sedes? Muéstralas todas en un mapa:

1. Selecciona el mapa
2. Haz clic en Añadir ubicación
3. Escribe la segunda dirección
4. Repite el proceso con todas las ubicaciones
5. El mapa ajusta el zoom automáticamente para mostrar todos los pines

Añadir una ruta

Pónselo fácil a quienes quieran llegar hasta ti:

1. Añade un botón de ruta debajo del mapa
2. Enlázalo a Google Maps con tu dirección
3. Los visitantes pueden navegar directamente desde su ubicación

Estilo del mapa

Ajusta los colores para que el mapa encaje con tu sitio web:

1. Ve a Ajustes avanzados
2. Selecciona un Estilo de mapa:
   • Estándar (colorido)
   • Plata (gris sutil)
   • Oscuro (para sitios web oscuros)
   • Retro (aspecto vintage)
3. O crea un estilo totalmente personalizado

Configurar la clave de API

Para las funciones avanzadas se necesita una clave de API de Google Maps.

Solicitar una clave de API

1. Ve a Google Cloud Console
2. Crea un proyecto nuevo
3. Activa la Maps JavaScript API
4. Crea una clave de API
5. Limita la clave a tu dominio por seguridad

Conectar la clave de API

1. Ve a los ajustes de Sitebuilder
2. Navega hasta Integraciones
3. Pega tu clave de API en Google Maps
4. Guarda y prueba el mapa

Mapa en la página de contacto

El lugar más habitual para un mapa es la página de contacto. Así puedes crear una página de contacto eficaz:

Sugerencia de diseño

1. Añade un diseño de dos columnas
2. Coloca los datos de contacto a la izquierda
3. Coloca el mapa a la derecha
4. Añade un formulario de contacto debajo

Datos de contacto junto al mapa

Muestra junto al mapa:

• Dirección completa
• Número de teléfono (en el que se pueda hacer clic en el móvil)
• Dirección de correo electrónico
• Horario de apertura
• Enlaces a redes sociales

SEO y visibilidad local

Un mapa no solo ayuda a los visitantes, sino también a tu posición en los resultados de búsqueda locales.

Esquema LocalBusiness

Añade datos estructurados:

1. Ve a Ajustes de SEO
2. Activa el marcado LocalBusiness
3. Rellena todos los datos de la empresa
4. Google entiende mejor tu ubicación

Google Mi Negocio

Combina tu mapa con un perfil de Google Mi Negocio:

1. Reclama tu empresa en Google Mi Negocio
2. Añade los mismos datos que en tu sitio web
3. Apareces en los resultados de búsqueda locales y en Google Maps

Optimización para móviles

Comprueba que tu mapa funcione bien en dispositivos móviles:

Interacción táctil

• Los usuarios pueden ampliar pellizcando
• El desplazamiento por la página sigue funcionando
• Un dedo no arrastra el mapa por accidente

Tamaño adaptable

1. Prueba el mapa en distintos tamaños de pantalla
2. Si hace falta, ajusta la altura para móviles
3. Plantéate usar un mapa más pequeño en los teléfonos

Problemas habituales

El mapa no se carga

Comprueba:

• ¿Es correcta tu clave de API?
• ¿Has activado las API correctas?
• ¿Tu dominio está permitido en los ajustes de la API?

Ubicación incorrecta

• Revisa la dirección por si hay erratas
• Añade el código postal para mayor precisión
• Si hace falta, mueve el pin manualmente

Tiempo de carga lento

• Carga el mapa solo cuando entre en pantalla
• Usa una imagen de mapa estática como alternativa
• Limita el número de marcadores

¿Necesitas ayuda?

Estamos a tu disposición. ¿Te has encontrado con algún problema o tienes preguntas? Nuestro equipo de soporte te ayuda encantado de forma personal. Envíanos un mensaje a través del sistema de tickets: solemos responder en unas horas y buscamos contigo la mejor solución.