Medios: mapa

Utilice el Mapa tipo de contenido desde el que añadir un mapa Google Maps Plataforma a la Page Builder stage. Por ejemplo, puede agregar una asignación a un bloque y, a continuación, agregar el bloque al Acerca de nosotros y Contáctenos. páginas.

Para sacar el máximo partido a Google Maps Platform, puede personalizar el mapa, resaltar las ubicaciones de las tiendas y utilizar Google Places para agregar información enriquecida acerca de su tienda a todos 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 {width="700" modal="regular"}

NOTE
Si está realizando cambios importantes en Page Builder contenido, se recomienda aumentar el Duración de 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 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
Icono Ocultar {width="25"}
Oculta el mapa actual.
Mostrar
Mostrar icono {width="25"}
Muestra el mapa oculto.
Duplicar
Icono Duplicar {width="25"}
Realiza una copia del mapa.
Eliminar
Icono Eliminar {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.

Configurar Google Maps para su administrador

Antes de añadir un mapa, primero debe abrir un account para una prueba gratuita de Google Maps Plataforma. 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: Obtenga su Google Maps Clave de API

Dependiendo de si ya tiene un Google Maps utilice uno de los siguientes procedimientos para obtener la clave de API necesaria para la configuración. Para configurar un Google Maps clave, debe ser un administrador del sitio autorizado para habilitar la facturación para su cuenta. Si no está listo para configurar una Google Maps En la cuenta de Platform, puede omitir este paso y utilizar el mapa 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 las credenciales de la API, siga los instrucciones en el Google Maps documentaciones.

  4. Copie la clave API en el portapapeles.

Paso 2: Configuración Google Maps in Commerce

  1. En el Administrador barra lateral, vaya a Stores > Settings>Configuration.

  2. En el panel izquierdo, debajo de 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 sobre 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 copiada en el paso 1.

  5. Haga clic Test Key.

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

  6. Tras comprobar la clave, haga clic en Save Config.

Añadir un mapa al escenario

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

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

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

    If Google Maps Platform está configurado para su tienda y aparece un mapa para su ubicación.

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

    If Google Maps Platform aún no se ha configurado para su tienda; en su lugar, aparecerá un mapa de marcador de posición.

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

Añadir una ubicación de mapa personalizada

  1. Pase el ratón sobre el contenedor de mapas para mostrar el cuadro de herramientas y elegir la Configuración ( Icono de configuración {width="20"} ) icono.

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

  3. Introduzca el Location Name que desea que se asocie con el pin del mapa.

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

    Alternativamente, en la variable Position , puede arrastrar el pin 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 desde URL

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

    • 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. Introduzca los números, sin comas, en cada una de las Coordinates cajas.

    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. Cuando termine, haga clic en Save.

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

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

Aplicar estilo al mapa styling

Utilice el Google Maps Asistente para estilos de plataforma 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 el Administrador barra lateral, vaya a Stores > Settings>Configuration.

  2. En el panel izquierdo, debajo de General, elija Content Management.

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

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

    Esta acción abre el Google Maps Asistente de estilo de plataforma en una pestaña independiente, donde puede definir un estilo para su Google Maps Proyecto de plataforma.

  5. Clic Create a Style y siga las instrucciones proporcionadas.

    Cuando termine, haga clic en Finish.

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

    • 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 la Estilo de mapas de Google cuadro.

    Si utiliza una dirección URL, sustituya el YOUR_API_KEY marcador de posición con Google Maps Clave de API. 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 mostrar el cuadro de herramientas y elija la Configuración ( Icono de configuración {width="20"} ) icono.

  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 Advanced ​ajustes según sea necesario:

    • Para controlar la posición horizontal del contenido del mapa que se ha agregado 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.
    • Configure las variables Border estilo 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 bordes:

      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 aplicarla al contenedor de mapas.

      Separe los distintos nombres de clase con un espacio.

    • Introduzca valores, en píxeles, para Margins and Padding para especificar los márgenes externos y el relleno interno 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. Cuando termine, haga clic en Save para aplicar la configuración de y volver a Page Builder workspace.

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 Page Builder escenario. De forma predeterminada, el mapa tiene 12 columnas de ancho, con un máximo de 16 columnas.

  1. En el Administrador barra lateral, vaya a Stores > Settings>Configuration.

  2. En el panel izquierdo, debajo de 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, borre la Use system value para modificar esta configuración.
    • Para Default Column Grid Size, introduzca un nuevo valor para el tamaño predeterminado de la cuadrícula.

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

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

  5. Cuando termine, haga clic en Save Config.

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