Media - Mappa

Utilizza il Mappa tipo di contenuto da cui aggiungere una mappa Google Maps Piattaforma al Page Builder fase. Ad esempio, puoi aggiungere una mappa a un blocco e quindi aggiungerlo al Chi siamo e Contattaci pagine.

Per ottenere il massimo da Google Maps Platform, puoi personalizzare la mappa, evidenziare le posizioni dei tuoi negozi e utilizzare Google Places per aggiungere informazioni dettagliate sul tuo store a tutti Google Maps.

Vantaggi dell’incorporamento di una mappa Google

  1. Fornisce agli acquirenti una gamma completa di informazioni sulla tua attività (numero di telefono, sito Web, recensioni, valutazioni a stelle e così via) direttamente sul tuo sito.

  2. Una mappa Google solitamente evidenzia le attrazioni vicine, parchi, ristoranti e così via. Queste informazioni aiutano i clienti a determinare l'ubicazione fisica e a pianificare il viaggio.

  3. Consente ai clienti di trovare facilmente l’indirizzo del negozio fisico senza dover aprire una nuova finestra del browser e lasciare il sito.

  4. Se disponi di una catena di negozi fisici, l’aggiunta di una Google Map sul sito ti aiuta a rafforzare la brand awareness e la credibilità sotto forma di elementi evidenziati.

Esempio di vetrina: mappa con posizione {width="700" modal="regular"}

NOTE
Se stai apportando modifiche significative a Page Builder è consigliabile aumentare il Durata sessione amministratore per evitare il timeout della sessione mentre si lavora.

Casella degli strumenti Mappa

La casella degli strumenti mappa viene visualizzata quando passi il cursore sul contenitore mappa.

Strumento
Icona
Descrizione
Sposta
Icona Sposta {width="25"}
Sposta la mappa in un'altra posizione sull'area di visualizzazione.
(etichetta)
Map
Identifica il contenitore di contenuto corrente come mappa. Passa il cursore del mouse sul contenitore della mappa per visualizzare la casella degli strumenti.
Impostazioni
Icona Impostazioni {width="25"}
Apre la pagina Modifica mappa, in cui è possibile modificare le proprietà della mappa e del contenitore.
Nascondi
Nascondi icona {width="25"}
Nasconde la mappa corrente.
Spettacolo
Mostra icona {width="25"}
Mostra la mappa nascosta.
Duplica
Icona Duplica {width="25"}
Crea una copia della mappa.
Rimuovi
Icona Rimuovi {width="25"}
Elimina la mappa dalla fase.
NOTE
Gli elementi nascosti vengono memorizzati nel database e invisibili ai clienti. Tuttavia, questi elementi sono visibili ai motori di ricerca e ad altri bot che eseguono la ricerca per indicizzazione del sito. Vengono inoltre restituiti come parte del contenuto se richiesto tramite una chiamata API con un attributo di invisibilità, a meno che non vengano rimossi dall’area di visualizzazione.

Configura Google Maps per l’Amministratore

Prima di aggiungere una mappa, è necessario aprire una account per una prova gratuita di Google Maps Platform. La versione di prova gratuita dura 12 mesi e include un credito di 300 dollari. Se utilizzi il tuo credito, Google non fatturerà il tuo account senza la tua autorizzazione.

Passaggio 1: ottenere Google Maps Chiave API

A seconda che tu disponga già di un Google Maps key, utilizza una delle procedure seguenti per ottenere la chiave API necessaria per la configurazione. Per impostare un Google Maps chiave, è necessario essere un amministratore del sito autorizzato per abilitare la fatturazione per il tuo account. Se non sei pronto a configurare un Google Maps Account Platform, puoi saltare questo passaggio e utilizzare per il momento la mappa dei segnaposto.

  1. Vai a Console della piattaforma Google Cloud.

  2. Fai clic sull’elenco a discesa del progetto e seleziona o crea il progetto per il quale desideri aggiungere una chiave API.

  3. Per configurare le credenziali API, segui la sezione istruzioni nel Google Maps documentazioni.

  4. Copia la chiave API negli Appunti.

Passaggio 2: configurare Google Maps in Commerce

  1. In Amministratore barra laterale, vai a Stores > Settings>Configuration.

  2. Nel pannello a sinistra sotto General, scegli Content Management.

  3. Espandi Selettore di espansione Advanced Content Tools.

    Strumenti di contenuto avanzati {width="600" modal="regular"}

    Per ulteriori informazioni sulle opzioni di configurazione degli Strumenti avanzati di Content Management, vedere Guida di riferimento alla configurazione.

  4. Per Google Maps API Key, incolla la chiave copiata nel passaggio 1.

  5. Clic Test Key.

    Se si è verificato un problema con la chiave, tornare al Google Maps Sito di Platform per risolvere il problema. Riprovare.

  6. Dopo aver verificato la chiave, fai clic su Save Config.

Aggiungi una mappa all'area di visualizzazione

  1. Apri la pagina, il blocco o il blocco dinamico in Page Builder Workspace.

  2. In Page Builder pannello, espandere Media e trascina un Map segnaposto nell'area di visualizzazione.

    Trascinamento di una mappa sull'area di visualizzazione {width="600" modal="regular"}

    Se Google Maps Platform è configurato per il tuo archivio, viene visualizzata una mappa per la posizione del tuo archivio.

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

    Se Google Maps Platform non è ancora configurato per lo store, verrà visualizzata una mappa segnaposto.

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

Aggiungi una posizione mappa personalizzata

  1. Passa il puntatore del mouse sul contenitore della mappa per visualizzare la casella degli strumenti e scegli Impostazioni ( Icona Impostazioni {width="20"} ).

  2. Nell'angolo superiore destro del Edit Map ​pagina, fai clic su Add Location.

  3. Inserisci il Location Name che desideri associare al pin sulla mappa.

  4. Raccogli le coordinate di posizione che desideri utilizzare per la posizione personalizzata.

    In alternativa, in Position nella casella, puoi trascinare il pin nella mappa visualizzata.

    Se necessario, vai a Google Maps in una nuova finestra del browser e utilizza uno dei seguenti metodi per ottenere le coordinate:

    Coordinate mappa {width="600" modal="regular"}

    Metodo 1: Copia da URL

    • Nell'angolo in alto a sinistra, immetti l'indirizzo nel Search e fare clic sul pulsante Ricerca ( Icona Ricerca {width="20"} ).

    • Copia le coordinate nell’URL e incollale in un blocco note.

    Metodo 2: Copia da "Cosa c'è qui?"

    • Fare clic con il pulsante destro del mouse sulla puntina rossa che indica la posizione sulla mappa e scegliere What’s here? nel menu.

    • Nell'etichetta visualizzata, copiare il testo, incluse le coordinate, e incollarlo in un blocco note.

  5. Inserisci i numeri, senza la virgola, in ciascuno dei Coordinates scatole.

    È inoltre possibile immettere tutte le informazioni rimanenti che si desidera siano disponibili sulla mappa.

  6. Compilare le altre informazioni che si desidera associare alla posizione della mappa:

    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
    Opzione Descrizione
    Phone Number Il numero di telefono della posizione.
    Street Address Indirizzo della località.
    City La città del luogo.
    Region/State L’area geografica o lo stato dell’ubicazione.
    Zip/Postal Code Il codice postale o ZIP della posizione.
    Country Il paese del luogo.
    Comment Eventuali commenti che si desidera includere.
  7. Al termine, fai clic su Save.

    La nuova posizione viene visualizzata nella mappa e nella griglia della posizione della mappa Edit Map ​pagina.

    Page Builder - mappa la griglia di posizione {width="600" modal="regular"}

Personalizzare lo stile della mappa styling

Utilizza il Google Maps Platform Styling Wizard per applicare uno dei sei temi predefiniti o per creare un tema personalizzato. Puoi generare un file JSON con le proprietà di stile della mappa o un collegamento alla mappa formattata.

Modificare lo stile della mappa

  1. In Amministratore barra laterale, vai a Stores > Settings>Configuration.

  2. Nel pannello a sinistra sotto General, scegli Content Management.

  3. Espandi Selettore di espansione Advanced Content Tools.

  4. Sotto Google Maps Style casella di testo, fare clic su Crea stile mappa.

    Questa azione apre il Google Maps Creazione guidata stile piattaforma in una scheda separata, in cui è possibile definire uno stile per Google Maps Progetto piattaforma.

  5. Clic Create a Style e seguire le istruzioni fornite.

    Al termine, fai clic su Finish.

  6. Esporta lo stile completato come codice JSON o come URL in modo da poterlo aggiungere al Commerce configurazione.

    • JSON: sotto la casella con il codice JSON generato, fai clic su Copy JSON.

    • URL: sotto la casella con l’URL generato, fai clic su Copy URL.

  7. Torna alla scheda del browser Amministratori e incolla il codice o l’URL generato nell’elenco Stile mappe Google casella.

    Se utilizzi un URL, sostituisci il YOUR_API_KEY segnaposto con il Google Maps Chiave API. Questo URL è collegato alla tua mappa Google formattata.

  8. Nell’angolo superiore destro, fai clic su Save Config.

Modificare le impostazioni della mappa

  1. Passa il puntatore del mouse sul contenitore della mappa per visualizzare la casella degli strumenti e scegli Impostazioni ( Icona Impostazioni {width="20"} ).

  2. Modifica le impostazioni di base in base alle esigenze:

    table 0-row-2 1-row-2 2-row-2 layout-auto
    Opzione Descrizione
    Height Specifica l'altezza in pixel della mappa visualizzata.
    Show Controls Determina se vengono visualizzati i controlli standard di Google Map.
  3. Modifica il Advanced ​impostazioni in base alle esigenze:

    • Per controllare il posizionamento orizzontale del contenuto della mappa aggiunto al contenitore, scegli un Alignment:

      table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
      Opzione Descrizione
      Default Applica l'impostazione predefinita di allineamento specificata nel foglio di stile del tema corrente.
      Left Allinea il contenuto lungo il bordo sinistro del contenitore di mappe, tenendo conto della spaziatura specificata.
      Center Allinea il contenuto al centro del contenitore di mappe, tenendo conto di eventuali spaziature specificate.
      Right Allinea il contenuto lungo il bordo destro del contenitore mappa, tenendo conto di eventuali spaziature specificate.
    • Imposta il Border stile applicato a tutti e quattro i lati del contenitore mappa:

      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
      Opzione Descrizione
      Default Applica lo stile di bordo predefinito specificato dal foglio di stile associato.
      None Non fornisce alcuna indicazione visibile dei bordi del contenitore.
      Dotted Il bordo del contenitore viene visualizzato come una linea tratteggiata.
      Dashed Il bordo del contenitore viene visualizzato come una linea tratteggiata.
      Solid Il bordo del contenitore viene visualizzato come linea continua.
      Double Il bordo del contenitore viene visualizzato come una doppia riga.
      Groove Il bordo del contenitore viene visualizzato come una linea scanalata.
      Ridge Il bordo del contenitore viene visualizzato come una linea scanalata.
      Inset Il bordo del contenitore viene visualizzato come una linea interna.
      Outset Il bordo del contenitore viene visualizzato come una linea di contorno.
    • Se si imposta uno stile di bordo diverso da None, completare le opzioni di visualizzazione del bordo:

      Colore bordo {width="600" modal="regular"}

      table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
      Opzione Descrizione
      Border Color Specificate il colore scegliendo un campione, facendo clic sul selettore del colore oppure immettendo un nome di colore valido o un valore esadecimale equivalente.
      Border Width Immettere il numero di pixel per lo spessore della linea del bordo.
      Border Radius Immettere il numero di pixel per definire la dimensione del raggio utilizzato per arrotondare ogni angolo del bordo.
    • (Facoltativo) Specifica i nomi di CSS classes dal foglio di stile corrente da applicare al contenitore mappa.

      Separare più nomi di classe con uno spazio.

    • Immetti i valori, in pixel, per il Margins and Padding per specificare i margini esterni e la spaziatura interna del contenitore mappa.

      Immetti ogni valore corrispondente nel diagramma contenitore mappa.

      table 0-row-2 1-row-2 2-row-2 layout-auto
      Area contenitore Descrizione
      Margins Quantità di spazio vuoto applicata al bordo esterno di tutti i lati del contenitore.
      Padding Quantità di spazio vuoto applicata al bordo interno di tutti i lati del contenitore.
      note note
      NOTE
      La spaziatura non è disponibile per il tipo di contenuto Mappa.
  4. Al termine, fai clic su Save per applicare le impostazioni e tornare al Page Builder Workspace.

Modificare le dimensioni della griglia

La dimensione della griglia determina la dimensione della mappa correlata a un colonna il Page Builder fase. Per impostazione predefinita, la mappa è larga 12 colonne, con un massimo di 16 colonne.

  1. In Amministratore barra laterale, vai a Stores > Settings>Configuration.

  2. Nel pannello a sinistra sotto General, scegli Content Management.

  3. Espandi Selettore di espansione Advanced Content Tools.

  4. Aggiornare le opzioni della griglia in base alle esigenze:

    note note
    NOTE
    Se necessario, cancellare il Use system value per modificare queste impostazioni.
    • Per Default Column Grid Size, immettere un nuovo valore per la dimensione predefinita della griglia.

    • Per Maximum Column Grid Size, immetti un nuovo valore per la dimensione massima predefinita della griglia.

    Impostazioni delle dimensioni della griglia delle colonne {width="600" modal="regular"}

  5. Al termine, fai clic su Save Config.

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