widget Categorías: Negocios
Muestre a sus visitantes el mapa de cualquier ubicación que desee. Use el widget Mapa para mostrar la ubicación física de su negocio o de un evento especial. También puede usarlo para mostrar a los clientes dónde encontrarán estacionamiento.
Mapbox es el proveedor de mapas predeterminado para el widget Mapa. Sin embargo, puedes hacer que Google Maps sea el proveedor de mapas predeterminado para todos los sitios nuevos y existentes de tu cuenta. Además de la widgetde mapas, Google Maps se convertirá en el valor predeterminado en todas las búsquedas de ubicaciones y mapas para la biblioteca de contenido y otros widgetaplicables.
Todos los datos de ubicación de Mapbox se almacenan y se aplican a Google Maps. Esto garantiza que no necesitará configurar ubicaciones nuevamente.
Tenga en cuenta que esta función solo puede ser habilitada por miembros del equipo con permiso de configuración profesional.
Para configurar Google Maps como su proveedor de mapas predeterminado:
-
En tu cuenta de Google Maps, genera una clave API. Para obtener información sobre cómo generar una clave de API, consulta la documentación de Google. Te recomendamos que consultes la política de uso y facturación de Google.
-
(Opcional) Si configuras tu cuenta de Google para que la clave API solo se pueda emplear en sitios web específicos, debes agregar duda.co, el dominio de tu sitio y, si procede, los dominios de marca blanca a la lista de sitios web permitidos de tu cuenta de Google. Es importante emplear el siguiente formato para sus dominios:
*.duda.co/* -
Desde tu panel de control, haz clic en tu avatar en la esquina superior derecha y selecciona Cuenta.
-
En la página Configuración de la cuenta, desplazar hacia abajo hasta la sección Integración de Google Map y haga clic en Configurar.
-
Pega tu clave de API en el campo y, a continuación, haz clic en Aplicar a todos los sitios. Esto hace que Google Maps sea el mapa predeterminado para todos los sitios existentes y nuevos de su cuenta.
En cualquier momento, puedes desactivar Google Maps y volver a Mapbox. Todos los datos de ubicación de Google Maps se almacenarán y se aplicarán automáticamente a Mapbox cuando cambie.
Opciones de configuración del mapa
-
Escriba su dirección comercial en el campo proporcionado.
-
Seleccione la dirección en la lista desplegable que aparece.
Nota
Si su dirección no aparece en el menú desplegable, significa que la base de datos de HERE que usa Website Builder no contiene la dirección. Para enviar o corregir la dirección, comuníquese con HERE Map Creator.
Cuando emplee Google Maps como proveedor predeterminado, consulte la documentación de Google, Agregar un lugar faltante a Google Maps.
-
-
Es posible que quiera mostrar un botón de mapa en lugar de una imagen de mapa.
-
Para mostrar un botón de mapa en dispositivos específicos en el editor tradicional, seleccione el botón Usar en dispositivos (
) donde desea que aparezca el botón. Si no se elige ningún dispositivo, se mostrará la imagen del mapa.
-
En Editor 2.0, el botón se puede habilitar para todos los dispositivos. Para habilitar el botón, haga clic en el botón Establecer como en todos los dispositivos .
-
-
Escriba el texto que desea que aparezca en el botón en el campo Texto en botón proporcionado.
-
Ventana emergente de información de ubicación (ventana de información para el marcador del mapa). Para mostrar una ventana emergente de información de ubicación en el widget de mapa:
-
Escriba un título y una descripción para el elemento emergente.
-
Seleccione esta opción para mostrar la ventana emergente Al hover, Al hacer clic o Siempre en el menú desplegable Visualización de ventana emergente.
-
Para incrustar mapas de Google Maps con el widget HTML:
-
Navegue a Google Maps.
-
Busque la ubicación que desee.
-
Haga clic en el menú de la parte superior izquierda, luego haga clic en Compartir o incrustar mapa .
-
Haga clic en la pestaña Incrustar mapa .
-
Copie el URL entre las comillas que van luego de <iframe src =". Asegúrese de copiar el URL completo anidado entre las comillas.
-
Vaya a su sitio y, en el panel izquierdo, haga clic en widgety arrastre el widgetHTML a una fila o columna.
-
Use el siguiente código de incrustación y agregue la URL que obtuvo de Google Maps entre las comillas que van después de iframe src=:
<div class="embed-container"><iframe src=" " frameborder="0" allowfullscreen></iframe></div> -
Vaya al Modo de desarrollador.
-
Haga clic en HTML/CSS del sitio y, a continuación, haga clic en site.css.
-
Incruste el siguiente CSS en esta sección:
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }El tamaño del mapa cambiará según corresponda para adaptarse a las vistas en los distintos dispositivos. Si usa el código de incrustación normal de Google Maps, el tamaño del widget de mapa aparecerá estático en todos los dispositivos y se cortará en la vista en los dispositivos móviles.