Média - Carte

Fournit aux acheteurs une gamme complète d'informations sur votre entreprise (numéro de téléphone, site Web, commentaires, évaluation par étoiles, etc.) directement sur votre site.

Une carte Google met généralement en évidence les attractions, parcs, restaurants, etc. à proximité. Ces renseignements aident vos clients à déterminer leur emplacement physique et à planifier leur voyage.

Permet aux clients de trouver facilement l'adresse de votre magasin physique sans avoir à ouvrir une nouvelle fenêtre de navigateur et quitter votre site.

Si vous disposez d’une chaîne de magasins physiques, l’ajout d’une carte Google sur votre site contribue à accroître la notoriété et la crédibilité de votre marque sous la forme d’éléments mis en surbrillance.

Accédez à la console Google Cloud Platform.

Cliquez sur la liste déroulante du projet et sélectionnez ou créez le projet pour lequel vous souhaitez ajouter une clé API.

Pour configurer vos informations d’identification d’API, suivez les instructions dans la documentation Google Maps.

Copiez votre clé API dans le presse-papiers.

Dans la barre latérale Admin, accédez à Stores > Settings>Configuration.

Dans le panneau de gauche sous General, choisissez Content Management.

Développez Advanced Content Tools.

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

Pour plus d’informations sur les options de configuration des outils avancés de gestion de contenu, consultez le Guide de référence de configuration.

Par Google Maps API Key, collez la clé que vous avez copiée à l’étape 1.

Cliquez sur Test Key.

En cas de problème avec votre clé, revenez sur le site Google Maps Platform pour résoudre le problème. Réessayez ensuite.

Une fois votre clé vérifiée, cliquez sur Save Config.

Ouvrez la page, le bloc ou le bloc dynamique dans l’espace de travail Page Builder.

Dans le panneau Page Builder, développez Media et faites glisser un espace réservé Map vers la scène.

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

Si Google Maps Platform est configuré pour votre boutique, un mappage s’affiche pour l’emplacement de votre boutique.

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

Si Google Maps Platform n’est pas encore configuré pour votre magasin, un mappage d’espace réservé s’affiche à la place.

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

Pointez sur le conteneur de mappage pour afficher la boîte à outils et choisissez l’icône Paramètres ( {width="20"} ).

Dans l’angle supérieur droit de la page Edit Map, cliquez sur Add Location.

Saisissez le Location Name que vous souhaitez associer à l’épingle sur la carte.

Collectez les coordonnées d’emplacement à utiliser pour l’emplacement personnalisé.

Vous pouvez également faire glisser l’épingle dans la carte affichée dans la zone Position.

Si nécessaire, accédez à Google Maps dans une nouvelle fenêtre de navigateur et utilisez l’une des méthodes suivantes pour obtenir les coordonnées :

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

Méthode 1 : Copier à partir de l’URL

• Dans le coin supérieur gauche, saisissez l’adresse dans la zone de Search, puis cliquez sur l’icône Rechercher ( {width="20"} ).

• Copiez les coordonnées dans l’URL et collez-les dans un bloc-notes.

Méthode 2: Copier à partir de « Qu’y a-t-il ici ? »

• Cliquez avec le bouton droit sur l'épingle rouge qui marque l'emplacement sur la carte et choisissez What’s here? dans le menu.

• Dans le libellé affiché, copiez le texte, y compris les coordonnées, et collez-le dans un bloc-notes.

Saisissez les nombres, sans la virgule, dans chacune des zones de Coordinates.

Vous pouvez également entrer autant d'informations restantes que vous souhaitez être disponibles sur la carte.

Renseignez toutes les autres informations que vous souhaitez associer à l'emplacement de la carte :

Cliquez ensuite sur Save.

Le nouvel emplacement apparaît dans la carte et dans la grille d'emplacement de la carte de la page Edit Map.

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

Dans la barre latérale Admin, accédez à Stores > Settings>Configuration.

Dans le panneau de gauche sous General, choisissez Content Management.

Développez Advanced Content Tools.

Sous la zone de texte Google Maps Style, cliquez sur Créer un style de mappage.

Cette action ouvre l’Google Maps assistant de style Platform dans un onglet distinct, dans lequel vous pouvez définir un style pour votre projet Google Maps Platform.

Cliquez sur Create a Style et suivez les instructions fournies.

Cliquez ensuite sur Finish.

Exportez le style terminé sous forme de code JSON ou d’URL afin de l’ajouter à la configuration Commerce.

• JSON : sous la zone contenant le code JSON généré, cliquez sur Copy JSON.

• URL : sous la zone contenant l’URL générée, cliquez sur Copy URL.

Revenez à l’onglet du navigateur d’administration et collez le code ou l’URL généré dans la zone Style de mappages Google.

Si vous utilisez une URL, remplacez l’espace réservé YOUR_API_KEY par votre clé API Google Maps. Cette URL renvoie à votre carte Google stylisée.

Dans le coin supérieur droit, cliquez sur Save Config.

Pointez sur le conteneur de carte pour afficher la boîte à outils et choisissez l’icône Paramètres ( {width="20"} ).

Modifiez les paramètres de base selon les besoins :

Modifiez les paramètres Advanced ​selon vos besoins :

• Pour contrôler le positionnement horizontal du contenu de carte qui a été ajouté au conteneur, choisissez une Alignment :

  table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
  Option	Description
  Default	Applique le paramètre d’alignement par défaut spécifié dans la feuille de style du thème actif.
  Left	Aligne le contenu le long de la bordure gauche du conteneur de carte, en tenant compte de la marge intérieure spécifiée.
  Center	Aligne le contenu au centre du conteneur de carte, en tenant compte de la marge intérieure spécifiée.
  Right	Aligne le contenu le long de la bordure droite du conteneur de carte, en tenant compte de la marge intérieure spécifiée.

• Définissez le style de Border appliqué aux quatre côtés du conteneur de carte :

  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
  Option	Description
  Default	Applique le style de bordure par défaut spécifié par la feuille de style associée.
  None	Ne fournit aucune indication visible des bordures du conteneur.
  Dotted	La bordure du conteneur s’affiche sous la forme d’une ligne pointillée.
  Dashed	La bordure du conteneur s’affiche sous la forme d’une ligne en tirets.
  Solid	La bordure du conteneur s’affiche sous la forme d’une ligne continue.
  Double	La bordure du conteneur s’affiche sous la forme d’une ligne double.
  Groove	La bordure du conteneur s’affiche sous la forme d’une ligne rainurée.
  Ridge	La bordure du conteneur s’affiche sous la forme d’une ligne crantée.
  Inset	La bordure du conteneur s’affiche sous la forme d’une ligne insérée.
  Outset	La bordure du conteneur s’affiche sous la forme d’une ligne de départ.

• Si vous définissez un style de bordure autre que None, renseignez les options d’affichage des bordures :

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

  table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
  Option	Description
  Border Color	Spécifiez la couleur en choisissant une nuance, en cliquant sur le sélecteur de couleurs ou en saisissant un nom de couleur valide ou une valeur hexadécimale équivalente.
  Border Width	Saisissez le nombre de pixels pour la largeur de la ligne de bordure.
  Border Radius	Saisissez le nombre de pixels pour définir la taille du rayon utilisé pour arrondir chaque coin de la bordure.

• (Facultatif) Spécifiez les noms des CSS classes de la feuille de style actuelle à appliquer au conteneur de mappage.

  Séparez plusieurs noms de classe par un espace.

• Saisissez les valeurs, en pixels, du Margins and Padding pour spécifier les marges extérieures et la marge intérieure du conteneur de carte.

  Saisissez chaque valeur correspondante dans le diagramme de conteneur de mappage.

  table 0-row-2 1-row-2 2-row-2 layout-auto
  Zone conteneur	Description
  Margins	Quantité d’espace vide appliqué au bord extérieur de tous les côtés du conteneur.
  Padding	Quantité d’espace vide appliqué au bord intérieur de tous les côtés du conteneur.

  note note
  NOTE
  La marge intérieure n’est pas disponible pour le type de contenu Mappage .

Une fois l’opération terminée, cliquez sur Save pour appliquer les paramètres et revenir à l’espace de travail Page Builder.

Dans la barre latérale Admin, accédez à Stores > Settings>Configuration.

Dans le panneau de gauche sous General, choisissez Content Management.

Développez Advanced Content Tools.

Mettez à jour les options de la grille selon vos besoins :

• Par Default Column Grid Size, saisissez une nouvelle valeur pour la taille par défaut de la grille.

• Par Maximum Column Grid Size, saisissez une nouvelle valeur pour la taille de grille maximale par défaut.

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

Cliquez ensuite sur Save Config.