Media - Map

Fournit aux acheteurs une gamme complète d’informations sur votre entreprise (numéro de téléphone, site web, critiques, évaluations, etc.) directement sur votre site.

Une carte Google permet généralement de voir les attractions, les parcs, les restaurants, etc. Ces informations aident vos clients à déterminer votre emplacement physique et à planifier leur voyage.

Permet aux clients de trouver facilement l’adresse de votre boutique 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 évidence.

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

Pour 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 au site de la plateforme Google Maps pour résoudre le problème. Ensuite, réessayez.

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 sur la scène.

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

Si Google Maps Platform est configuré pour votre magasin, une carte s’affiche pour l’emplacement de votre magasin.

{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 sélectionnez l’icône Paramètres ( {width="20"} ).

Dans le coin 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 de l’emplacement que vous souhaitez utiliser pour l’emplacement personnalisé.

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

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 de l’URL

• Dans le coin supérieur gauche, saisissez l’adresse dans la zone Search et 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 : Copie de "Qu’est-ce qu’il y a ici ?"

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

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

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

Vous pouvez également saisir toutes les informations restantes qui doivent être disponibles sur la carte.

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

Une fois l’opération terminée, cliquez sur Save.

Le nouvel emplacement apparaît dans la carte et dans la grille d’emplacement de la carte sur 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 carte.

Cette action ouvre l’Google Maps Assistant de style de plateforme dans un onglet distinct, où vous pouvez définir un style pour votre projet de plateforme Google Maps.

Cliquez sur Create a Style et suivez les instructions fournies.

Une fois l’opération terminée, cliquez sur Finish.

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

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

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

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

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

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

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

Modifiez les paramètres de base selon les besoins :

Modifiez les paramètres Advanced ​selon les besoins :

• Pour contrôler le positionnement horizontal du contenu de la carte ajouté au conteneur, choisissez un 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 mappage, en tenant compte de toute marge intérieure spécifiée.
  Center	Aligne le contenu au centre du conteneur de mappage, en tenant compte de toute marge intérieure spécifiée.
  Right	Aligne le contenu le long de la bordure droite du conteneur de mappage, en tenant compte de toute marge intérieure spécifiée.

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

  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 pointillés.
  Solid	La bordure du conteneur s’affiche sous la forme d’une ligne pleine.
  Double	La bordure du conteneur s’affiche sous la forme d’une ligne double.
  Groove	La bordure du conteneur s’affiche sous forme de ligne droite.
  Ridge	La bordure du conteneur s’affiche sous la forme d’une ligne à droite.
  Inset	La bordure du conteneur s’affiche sous la forme d’une ligne d’insertion.
  Outset	La bordure du conteneur apparaît comme une ligne de départ.

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

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

  table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
  Option	Description
  Border Color	Définissez la couleur en choisissant un échantillon, 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) Indiquez les noms de CSS classes de la feuille de style actuelle à appliquer au conteneur de mappage.

  Séparez plusieurs noms de classe par un espace.

• Entrez des valeurs, en pixels, pour que Margins and Padding indique les marges extérieures et la marge intérieure du conteneur de cartes.

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

  table 0-row-2 1-row-2 2-row-2 layout-auto
  Zone de conteneur	Description
  Margins	Espace vide appliqué au bord extérieur de tous les côtés du conteneur.
  Padding	Espace blanc 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 Carte .

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 grille selon les besoins :

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

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

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

Une fois l’opération terminée, cliquez sur Save Config.