Sitio web avanzado: Widgets - Mapa

Para más información sobre cómo agregar widgets a tu sitio, consulta Agregar widgets.

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 tu proveedor de mapas predeterminado:

1. En tu cuenta de Google Maps, genera una clave API. Para saber cómo generar una clave API, consulta la documentación de Google. Se recomienda revisar la Política de uso y facturación de Google.
2. Desde tu Panel de Control, haz clic en tu avatar en la esquina superior derecha y selecciona Cuenta.
3. 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.
4. 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.

Para acceder al editor de contenido:

6. Haz clic derecho en el widget y selecciona Editar contenido.
7. Selecciona Opciones de configuración del mapa .
8. Escribe tu dirección comercial en el campo provisto.
9. Selecciona la dirección en el menú desplegable. Si tu dirección no aparece, significa que la base de datos HERE que utiliza Guesty Sites no la contiene. Para enviar o corregir la dirección, contacta con HERE Map Creator.
10. Puedes 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, selecciona el botón Usar en dispositivos ( ) donde deseas que aparezca el botón. Si no se selecciona ningún dispositivo, se mostrará la imagen del mapa.
11. Escribe el texto que deseas que aparezca en el botón en el campo Texto en el botón.
12. Selecciona 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:
    1. Escribe un título y una descripción para la ventana emergente.
    2. Selecciona si deseas mostrar la ventana emergente Al pasar el mouse, Al hacer clic o Siempre en el menú desplegable Visualización de ventana emergente.

Para acceder al editor de diseño, haz clic derecho en el elemento y haz clic en Editar diseño.

Haz clic en la pestaña Diseño para editar el diseño del mapa que aparece en tu 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), consulta Diseño de widgets.

Para incrustar mapas de Google Maps usando el widget HTML:

1. Navega a Google Maps.
2. Busca la ubicación que desees.
3. Haz clic en el menú de la parte superior izquierda, luego haz clic en Compartir o incrustar mapa.
4. Haz clic en la pestaña Incrustar mapa.
5. Copia la URL entre comillas después de <iframe src=". Asegúrate de copiar la URL completa anidada entre comillas.

   

6. Navega a tu sitio y, en el panel izquierdo, haz clic en Widgets y arrastra el widget HTML a una fila o columna.
7. Utiliza el siguiente código de inserción y agrega la URL que obtuviste de Google Maps entre comillas después de iframe src=:

   <div class="embed-container"><iframe src=" " frameborder="0" allowfullscreen></iframe></div>

8. Ve al modo de desarrollador.
9. Haz clic en Sitio HTML/CSS y, a continuación, en site.css.
10. Incrusta 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 habitual de Google Maps, el tamaño del widget del mapa se mostrará fijo en todos los dispositivos y recortado en la vista móvil.