Medios: mapa

Última actualización: 14 de julio de 2024
  • 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.

HerramientaIconoDescripción
Mover Icono de mover Mueve el mapa a otra posición en el escenario.
(etiqueta)MapIdentifica 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 Abre la página Editar mapa, donde puede cambiar las propiedades del mapa y del contenedor.
Hide Ocultar icono Oculta el mapa actual.
Mostrar Mostrar icono Muestra el mapa oculto.
Duplicar Icono duplicado Realiza una copia del mapa.
Eliminar Quitar icono 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

    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

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

    Google Maps

    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

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

  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

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

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

    OpciónDescripción
    Phone NumberNúmero de teléfono de la ubicación.
    Street AddressLa dirección de la ubicación.
    CityLa ciudad de la ubicación.
    Region/StateLa región o el estado de la ubicación.
    Zip/Postal CodeEl código postal de la ubicación.
    CountryEl país de la ubicación.
    CommentLos 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

Aplicar estilo al mapa

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

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

    OpciónDescripción
    HeightEspecifica la altura del mapa mostrado en píxeles.
    Show ControlsDetermina 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:

      OpciónDescripción
      DefaultAplica la configuración predeterminada de alineación especificada en la hoja de estilos de la temática actual.
      LeftAlinea el contenido a lo largo del borde izquierdo del contenedor de mapas, con margen para cualquier relleno que se especifique.
      CenterAlinea el contenido en el centro del contenedor de mapas, con margen para cualquier relleno que se especifique.
      RightAlinea 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:

      OpciónDescripción
      DefaultAplica el estilo de borde predeterminado especificado por la hoja de estilos asociada.
      NoneNo proporciona ninguna indicación visible de los bordes del contenedor.
      DottedEl borde del contenedor aparece como una línea de puntos.
      DashedEl borde del contenedor aparece como una línea discontinua.
      SolidEl borde del contenedor aparece como una línea sólida.
      DoubleEl borde del contenedor aparece como una línea doble.
      GrooveEl borde del contenedor aparece como una línea ranurada.
      RidgeEl borde del contenedor aparece como una línea discontinua.
      InsetEl borde del contenedor aparece como una línea de margen.
      OutsetEl 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

      OpciónDescripción
      Border ColorEspecifique 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 WidthIntroduzca el número de píxeles de la anchura de la línea del borde.
      Border RadiusIntroduzca 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.

      Área del contenedorDescripción
      MarginsCantidad de espacio en blanco que se aplica al borde exterior de todos los lados del contenedor.
      PaddingCantidad de espacio en blanco que se aplica al borde interior de todos los lados del contenedor.
      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.