DocumentaciónCommercePage Builder

Medios: mapa

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Temas:

Creado para:

  • Principiante
  • Intermedio
  • Usuario

Use el tipo de contenido Map para agregar un mapa de Google Maps Platform al Page Builder stage. Por ejemplo, podría agregar un mapa a un bloque y luego agregar el bloque a las páginas Acerca de nosotros y Contáctenos.

Para aprovechar al máximo la plataforma Google Maps, puede personalizar el mapa, resaltar las ubicaciones de las tiendas y usar Google Places para agregar información enriquecida sobre la tienda a todos los Google Maps.

Ventajas de incrustar un mapa de Google

  1. Ofrece a los compradores toda una gama de información sobre tu negocio (número de teléfono, sitio web, opiniones, valoraciones por estrellas, etc.) directamente en tu sitio.

  2. Un mapa de Google suele resaltar atracciones, parques, restaurantes, etc. cercanos. Esta información ayuda a sus clientes a determinar su ubicación física y a planificar su viaje.

  3. Facilita a los clientes encontrar la dirección de su tienda física sin necesidad de abrir una nueva ventana del explorador y abandonar el sitio.

  4. Si tiene una cadena de tiendas físicas, añadir un Google Map en el sitio ayuda a aumentar la imagen de marca y la credibilidad en forma de elementos destacados.

Ejemplo de tienda - mapa con ubicación

NOTE
Si está realizando cambios significativos en el contenido de Page Builder, se recomienda aumentar la Duración de la sesión de administrador para evitar que se agote el tiempo de espera de la sesión mientras trabaja.

Cuadro de herramientas Mapa

El cuadro de herramientas de asignación aparece cuando pasa el ratón por encima del contenedor de asignación.

Herramienta
Icono
Descripción
Mover
Icono de mover {width="25"}
Mueve el mapa a otra posición en el escenario.
(etiqueta)
Map
Identifica el contenedor de contenido actual como un mapa. Pase el ratón sobre el contenedor del mapa para ver el cuadro de herramientas.
Configuración
Icono de configuración {width="25"}
Abre la página Editar mapa, donde puede cambiar las propiedades del mapa y del contenedor.
Hide
Ocultar icono {width="25"}
Oculta el mapa actual.
Mostrar
Mostrar icono {width="25"}
Muestra el mapa oculto.
Duplicar
Icono duplicado {width="25"}
Realiza una copia del mapa.
Eliminar
Quitar icono {width="25"}
Elimina el mapa de la fase.
NOTE
Los elementos ocultos se almacenan en la base de datos y son invisibles para los clientes. Sin embargo, estos elementos son visibles para los motores de búsqueda y otros bots que rastrean el sitio. También se devuelven como parte del contenido si se solicitan a través de una llamada de API con un atributo de invisibilidad, a menos que los elimine del escenario.

Configure Google Maps para su administrador

Antes de agregar un mapa, primero debes abrir una cuenta para obtener una versión de prueba gratuita de la plataforma Google Maps. La prueba gratuita dura 12 meses e incluye un crédito de $300. Si usas tu crédito, Google no factura tu cuenta sin tu permiso.

Paso 1: Obtener la clave de API Google Maps

Dependiendo de si ya tiene una clave Google Maps, utilice uno de los siguientes procedimientos para obtener la clave de API necesaria para la configuración. Para configurar una clave Google Maps, debe ser un administrador del sitio autorizado para habilitar la facturación en su cuenta. Si no está listo para configurar una cuenta de Google Maps Platform, puede omitir este paso y utilizar la asignación de marcador de posición por ahora.

  1. Vaya a la consola de Google Cloud Platform.

  2. Haga clic en el menú desplegable del proyecto y seleccione o cree el proyecto para el que desea agregar una clave de API.

  3. Para configurar sus credenciales de API, siga las instrucciones de la documentación de Google Maps.

  4. Copie la clave API en el portapapeles.

Paso 2: Configurar Google Maps en Commerce

  1. En la barra lateral Admin, vaya a Stores > Settings>Configuration.

  2. En el panel izquierdo bajo General, elija Content Management.

  3. Expandir Selector de expansión Advanced Content Tools.

    Herramientas de contenido avanzadas {width="600" modal="regular"}

    Para obtener más información acerca de las opciones de configuración de las Herramientas avanzadas de administración de contenido, consulte la Guía de referencia de configuración.

  4. Para Google Maps API Key, pegue la clave que copió en el paso 1.

  5. Haga clic en Test Key.

    Si hay algún problema con su clave, vuelva al sitio de Google Maps Platform para resolver el problema. A continuación, inténtelo de nuevo.

  6. Una vez verificada su clave, haga clic en Save Config.

Añadir un mapa al escenario

  1. Abra la página, bloque o bloque dinámico en el área de trabajo Page Builder.

  2. En el panel Page Builder, expanda Media y arrastre un marcador de posición Map al escenario.

    Arrastrando un mapa al escenario {width="600" modal="regular"}

    Si la plataforma Google Maps está configurada para su tienda, aparecerá un mapa para la ubicación de la tienda.

    Google Maps {width="600" modal="regular"}

    Si la plataforma Google Maps aún no está configurada para su tienda, aparecerá un mapa de marcador de posición en su lugar.

    Google Maps marcador de posición {width="600" modal="regular"}

Añadir una ubicación de mapa personalizada

  1. Pase el ratón sobre el contenedor del mapa para ver la caja de herramientas y elija el icono Configuración ( icono Configuración {width="20"} ).

  2. En la esquina superior derecha de la página Edit Map, haga clic en Add Location.

  3. Escriba el(la) Location Name que desea asociar con el pin en el mapa.

  4. Recopile las coordenadas de ubicación que desee utilizar para la ubicación personalizada.

    Como alternativa, en el cuadro Position, puede arrastrar el fijador en el mapa mostrado.

    Si es necesario, vaya a Google Maps en una nueva ventana del explorador y utilice uno de los siguientes métodos para obtener las coordenadas:

    Coordenadas de mapa {width="600" modal="regular"}

    Método 1: Copiar de la dirección URL

    • En la esquina superior izquierda, escriba la dirección en el cuadro Search y haga clic en el icono Buscar ( Icono de búsqueda {width="20"} ).

    • Copie las coordenadas en la dirección URL y péguelas en un bloc de notas.

    Método 2: Copia de "¿Qué hay aquí?"

    • Haga clic con el botón derecho en el pin rojo que marca la ubicación en el mapa y elija What’s here? en el menú.

    • En la etiqueta mostrada, copie el texto, incluidas las coordenadas, y péguelo en un bloc de notas.

  5. Escriba los números, sin comas, en cada uno de los cuadros Coordinates.

    También puede introducir la mayor parte de la información restante que desee que esté disponible en el mapa.

  6. Complete cualquier otra información que desee asociar con la ubicación del mapa:

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 layout-auto
    Opción Descripción
    Phone Number Número de teléfono de la ubicación.
    Street Address La dirección de la ubicación.
    City La ciudad de la ubicación.
    Region/State La región o el estado de la ubicación.
    Zip/Postal Code El código postal de la ubicación.
    Country El país de la ubicación.
    Comment Los comentarios que desee incluir.

  7. Una vez finalizado, haga clic en Save.

    La nueva ubicación aparece en el mapa y en la cuadrícula de ubicación del mapa, en la página Edit Map.

    Page Builder - asigna la cuadrícula de ubicación {width="600" modal="regular"}

Aplicar estilo al mapa styling

Use el Asistente para estilo de plataforma Google Maps para aplicar una de las seis temáticas predefinidas o para crear una temática personalizada. Puede generar un archivo JSON con las propiedades de estilo de asignación o un vínculo al mapa con estilo.

Cambio del estilo del mapa

  1. En la barra lateral Admin, vaya a Stores > Settings>Configuration.

  2. En el panel izquierdo bajo General, elija Content Management.

  3. Expandir Selector de expansión Advanced Content Tools.

  4. En el cuadro de texto Google Maps Style, haga clic en Crear estilo de mapa.

    Esta acción abre el Google Maps Asistente para estilo de plataforma en una ficha independiente, donde puede definir un estilo para el proyecto de plataforma Google Maps.

  5. Haga clic en Create a Style y siga las instrucciones proporcionadas.

    Una vez finalizado, haga clic en Finish.

  6. Exporte el estilo completado como código JSON o como URL para poder agregarlo a la configuración Commerce.

    • JSON: Debajo del cuadro con el código JSON generado, haga clic en Copy JSON.

    • URL: debajo del cuadro con la dirección URL generada, haga clic en Copy URL.

  7. Vuelva a la pestaña del explorador de administración y pegue el código o la dirección URL generados en el cuadro Estilo de Google Maps.

    Si está usando una dirección URL, reemplace el marcador de posición YOUR_API_KEY por su clave de API Google Maps. Esta dirección URL está vinculada al mapa de Google con estilo.

  8. En la esquina superior derecha, haga clic en Save Config.

Cambio de la configuración del mapa

  1. Pase el ratón sobre el contenedor del mapa para ver el cuadro de herramientas y elija el icono Configuración ( icono Configuración {width="20"} ).

  2. Cambie la configuración básica según sea necesario:

    table 0-row-2 1-row-2 2-row-2 layout-auto
    Opción Descripción
    Height Especifica la altura del mapa mostrado en píxeles.
    Show Controls Determina si aparecen los controles estándar de Google Map.

  3. Modifique la configuración de Advanced ​según sea necesario:

    • Para controlar la posición horizontal del contenido del mapa que se agregó al contenedor, elija un Alignment:

      table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
      Opción Descripción
      Default Aplica la configuración predeterminada de alineación especificada en la hoja de estilos de la temática actual.
      Left Alinea el contenido a lo largo del borde izquierdo del contenedor de mapas, con margen para cualquier relleno que se especifique.
      Center Alinea el contenido en el centro del contenedor de mapas, con margen para cualquier relleno que se especifique.
      Right Alinea el contenido a lo largo del borde derecho del contenedor de mapas, con margen para cualquier relleno que se especifique.

    • Establezca el estilo Border aplicado a los cuatro lados del contenedor de mapas:

      table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2 layout-auto
      Opción Descripción
      Default Aplica el estilo de borde predeterminado especificado por la hoja de estilos asociada.
      None No proporciona ninguna indicación visible de los bordes del contenedor.
      Dotted El borde del contenedor aparece como una línea de puntos.
      Dashed El borde del contenedor aparece como una línea discontinua.
      Solid El borde del contenedor aparece como una línea sólida.
      Double El borde del contenedor aparece como una línea doble.
      Groove El borde del contenedor aparece como una línea ranurada.
      Ridge El borde del contenedor aparece como una línea discontinua.
      Inset El borde del contenedor aparece como una línea de margen.
      Outset El borde del contenedor aparece como una línea de inicio.

    • Si establece un estilo de borde distinto de None, complete las opciones de visualización de borde:

      Color del borde {width="600" modal="regular"}

      table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
      Opción Descripción
      Border Color Especifique el color seleccionando una muestra, haciendo clic en el selector de color o introduciendo un nombre de color válido o un valor hexadecimal equivalente.
      Border Width Introduzca el número de píxeles de la anchura de la línea del borde.
      Border Radius Introduzca el número de píxeles para definir el tamaño del radio que se utiliza para redondear cada esquina del borde.

    • (Opcional) Especifique los nombres de CSS classes de la hoja de estilos actual para aplicarlos al contenedor de asignaciones.

      Separe los distintos nombres de clase con un espacio.

    • Escriba valores, en píxeles, para que Margins and Padding especifique los márgenes exteriores y el margen interior del contenedor de mapas.

      Introduzca cada valor correspondiente en el diagrama del contenedor de asignaciones.

      table 0-row-2 1-row-2 2-row-2 layout-auto
      Área del contenedor Descripción
      Margins Cantidad de espacio en blanco que se aplica al borde exterior de todos los lados del contenedor.
      Padding Cantidad de espacio en blanco que se aplica al borde interior de todos los lados del contenedor.
      note note
      NOTE
      El relleno no está disponible para el tipo de contenido Asignar.

  4. Una vez finalizado, haga clic en Save para aplicar la configuración y volver al área de trabajo Page Builder.

Cambiar el tamaño de la cuadrícula

El tamaño de la cuadrícula determina el tamaño del mapa relacionado con una columna en el escenario Page Builder. De forma predeterminada, el mapa tiene 12 columnas de ancho, con un máximo de 16 columnas.

  1. En la barra lateral Admin, vaya a Stores > Settings>Configuration.

  2. En el panel izquierdo bajo General, elija Content Management.

  3. Expandir Selector de expansión Advanced Content Tools.

  4. Actualice las opciones de cuadrícula según sea necesario:

    note note
    NOTE
    Si es necesario, desactive la casilla de verificación Use system value para modificar esta configuración.

    • Para Default Column Grid Size, escriba un nuevo valor para el tamaño predeterminado de la cuadrícula.

    • Para Maximum Column Grid Size, escriba un nuevo valor para el tamaño de cuadrícula máximo predeterminado.

    Configuración del tamaño de la cuadrícula de columna {width="600" modal="regular"}

  5. Una vez finalizado, haga clic en Save Config.

recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d