Para más información sobre cómo agregar widgets a su sitio, consulte Agregar widgets.
Consejo:
Para obtener más información sobre los widgets y la biblioteca de widgets, consulte Widgets: Biblioteca y Resumen.Google Maps como proveedor de mapas predeterminado
Mapbox es el proveedor de mapas predeterminado para el widget Mapa. Sin embargo, puedes configurar Google Maps como proveedor de mapas predeterminado para todos los sitios nuevos y existentes de tu cuenta. Además del widget Mapa, Google Maps se convertirá en el proveedor predeterminado para todas las búsquedas de ubicación y mapas de la Biblioteca de contenido y otros widgets aplicables.
Todos los datos de ubicación de Mapbox se guardan y se aplican a Google Maps. Esto garantiza que no tengas que volver a configurar las ubicaciones.
Para configurar Google Maps como su proveedor de mapas predeterminado:
- En tu cuenta de Google Maps, genera una clave API. Para saber cómo API, consulta la documentación de Google. Te recomendamos que revises la política de uso y facturación de Google.
- Desde tu Panel de Control, haz clic en tu avatar en la esquina superior derecha y selecciona Cuenta.
- En la página Ajustes de la cuenta, desplázate hacia abajo hasta la sección Integración de Google Maps y haz clic en Configurar.
- Pega tu clave API en el campo y haz clic en "Aplicar a todos los sitios". Esto convertirá a Google Maps en el mapa predeterminado para todos los sitios, tanto nuevos como existentes, de tu cuenta.
Puedes desactivar Google Maps y volver a Mapbox en cualquier momento. Todos los datos de ubicación de Google Maps se guardarán y se aplicarán automáticamente a Mapbox al cambiar.
Editor de contenido
Para acceder al editor de contenido:
- Inicie sesión en su cuenta de Guesty.
- En la barra de navegación superior, haga clic en el selector de modo y seleccione Modo de crecimiento.
- Haga clic en Distribución.
- Haga clic en la miniatura de Sitios web de Guesty.
- A la derecha del sitio web correspondiente, haga clic en Editar.
- Haga clic derecho en el widget y seleccione Editar contenido.
- Seleccione Opciones de configuración del mapa .
- Escriba su dirección comercial en el campo provisto.
- Seleccione la dirección en el menú desplegable. Si su dirección no aparece, significa que la base de datos HERE que utiliza Guesty Sitios web no la contiene. Para enviar o corregir la dirección, contacte con HERE Map Creator.
- Puede elegir mostrar un botón de mapa en lugar de una imagen de mapa.
- Para mostrar un botón de mapa en dispositivos específicos, seleccione el botón Usar en dispositivos (
) donde desea que aparezca el botón. Si no se selecciona ningún dispositivo, se mostrará la imagen del mapa.
- Para mostrar un botón de mapa en dispositivos específicos, seleccione el botón Usar en dispositivos (
- Escriba el texto que desea que aparezca en el botón en el campo Texto en el botón.
- Seleccione Mostrar ventana emergente con información de ubicación (Ventana de información del marcador del mapa). Para mostrar una ventana emergente con información de ubicación en el widget del mapa:
- Escriba un título y una descripción para la ventana emergente.
- Seleccione si desea mostrar la ventana emergente Al pasar el mouse, Al hacer clic o Siempre en el menú desplegable Visualización de ventana emergente.
Editor de diseño
Para acceder al editor de diseño, haga clic derecho en el elemento y haga clic en Editar diseño.
Haga clic en la pestaña Diseño para editar el diseño del mapa que aparece en su sitio.
Para obtener información sobre las opciones de diseño que no son específicas de este widget (por ejemplo, diseño, estilo o espaciado), consulte Diseño de widgets.
Incrustar un mapa de Google mediante un widget HTML
Para incrustar mapas de Google Maps usando el widget HTML:
- Navega a Google Maps.
- Busca la ubicación que desees.
- Haga clic en el menú de la parte superior izquierda y luego haga clic en Compartir o incrustar mapa.
- Haga clic en la pestaña Incrustar mapa.
- Copie la URL entre comillas después de <iframe src=". Asegúrese de copiar la URL completa anidada entre comillas.
- Navegue a su sitio y, en el panel izquierdo, haga clic en Widgets y arrastre el widget HTML a una fila o columna.
- Utilice el siguiente código de inserción y agregue la URL que obtuvo de Google Maps entre comillas después del iframe src=:
<div class="embed-container"><iframe src=" " frameborder="0" allowfullscreen></iframe></div> - Vaya al modo de desarrollador.
- Haga clic en Sitio HTML/CSS y, a continuación, en site.css.
- Incruste el siguiente CSS en esta sección:
.embed-container { posición: relativa; relleno inferior: 56.25%; altura: 0; desbordamiento: oculto; ancho máximo: 100%; } .embed-container iframe, .embed-container objeto, .embed-container embed { posición: absoluta; superior: 0; izquierda: 0; ancho: 100%; altura: 100%; }
El mapa se ajustará al tamaño de las diferentes vistas del dispositivo. Si usas el código de inserción de Google Maps, el tamaño del widget del mapa aparecerá estático en todos los dispositivos y recortado en la vista móvil.
