widget: Mapa

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.

Para obtener información sobre agregar widget, consulte agregar widget.

Recomendación

Para obtener más información sobre widget y la biblioteca widget, consulte widget: Biblioteca y descripción general.

Editor de contenido

Para acceder al editor de contenido, haga clic con el botón derecho en el widget y seleccione Editar contenido.

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.

  • 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, seleccione el botón Usar en dispositivos (botones-mapa-dispositivos.png) donde desea que aparezca el botón. Si no se selecciona ningún dispositivo, se mostrará la imagen del mapa.

    • En el Editor 2.0, el botón se puede habilitar para todos los dispositivos. Para habilitar el botón, haga clic en el interruptor Establecer como botón en todos los dispositivos .

  • Escriba el texto que desea que aparezca en el botón en el campo Texto en el botón .

  • 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.

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 con un widget HTML

Para incrustar mapas de Google Maps con el widget HTML:

  1. Navegue a Google Maps.

  2. Busque la ubicación que desee.

  3. Haga clic en el menú de la parte superior izquierda, luego haga clic en Compartir o incrustar mapa .

  4. Haga clic en la pestaña Incrustar mapa .

  5. Copie el URL entre las comillas que van luego de <iframe src =". Asegúrese de copiar el URL completo anidado entre las comillas.

  6. Vaya a su sitio y, en el panel izquierdo, haga clic en widgety arrastre el widgetHTML a una fila o columna.

  7. 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>

  8. Vaya al Modo de desarrollador.

  9. Haga clic en Sitio HTML/CSS y, a continuación, en site.css.

  10. 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.