Media - Map
Utilisez le type de contenu Map pour ajouter une carte de Google Maps Platform à l’ Page Builder étape. Par exemple, vous pouvez ajouter une carte à un bloc, puis le bloc aux pages À propos de nous et Nous contacter.
Pour tirer le meilleur parti de Google Maps Platform, vous pouvez personnaliser la carte, mettre en surbrillance les emplacements de vos magasins et utiliser Google Places pour ajouter des informations riches sur votre magasin à tous les Google Maps.
Avantages de l’incorporation d’une carte Google
-
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.
Boîte à outils de mappage
La boîte à outils de carte s’affiche lorsque vous placez le pointeur de la souris sur le conteneur de cartes.
![Icône Déplacer](./media_1224013998716f9ac04c80146b04284c714a0f6df.png?width=750&format=png&optimize=medium)
![Icône Paramètres](./media_1005459c1431738d0f1a2e69d5c4952c8e7d5975a.png?width=750&format=png&optimize=medium)
![Icône Masquer](./media_177895fcf55b9b00ed79d2f6048c39269cba17682.png?width=750&format=png&optimize=medium)
![Icône Afficher](./media_18b0e1c3886d1f2d0ce57176395ac2663b761f5d3.png?width=750&format=png&optimize=medium)
![Icône Dupliquer](./media_1d20e9c33185846c6ce9b8ad56d7e52d49d00f42f.png?width=750&format=png&optimize=medium)
![Supprimer l’icône](./media_1449694d11bdc3b5405f3bb2b059606a5d8eb3581.png?width=750&format=png&optimize=medium)
Configurer Google Maps pour votre administrateur
Avant d’ajouter une carte, vous devez d’abord ouvrir un compte pour une version d’évaluation gratuite de Google Maps Platform. L’essai gratuit dure 12 mois et comprend un crédit de 300 $. Si vous utilisez votre crédit, Google ne facture pas votre compte sans votre permission.
Étape 1 : Obtention de la clé d’API Google Maps
Selon que vous disposez déjà d’une clé Google Maps, utilisez l’une des procédures suivantes pour obtenir la clé d’API requise pour la configuration. Pour configurer une clé Google Maps, vous devez être un administrateur de site autorisé à activer la facturation pour votre compte. Si vous n’êtes pas prêt à configurer un compte de plateforme Google Maps, vous pouvez ignorer cette étape et utiliser la carte d’espace réservé pour l’instant.
-
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.
Étape 2 : configurer Google Maps dans Commerce
-
Dans la barre latérale Admin, accédez à Stores > Settings>Configuration.
-
Dans le panneau de gauche sous General, choisissez Content Management.
-
Développez
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.
Ajout d’une carte à l’étape
-
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.
Si Google Maps Platform est configuré pour votre magasin, une carte s’affiche pour l’emplacement de votre magasin.
Si Google Maps Platform n’est pas encore configuré pour votre magasin, un mappage d’espace réservé s’affiche à la place.
Ajout d’un emplacement de carte personnalisé
-
Pointez sur le conteneur de mappage pour afficher la boîte à outils et sélectionnez l’icône Paramètres (
-
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 :
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 (
-
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 :
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 Option Description Phone Number Numéro de téléphone de l’emplacement. Street Address Adresse de la rue de l'emplacement. City La ville de l’emplacement. Region/State Région ou état de l’emplacement. Zip/Postal Code Code postal de l’emplacement. Country Pays de l’emplacement. Comment Tous les commentaires que vous souhaitez inclure. -
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.
Donner un style à la carte styling
Utilisez l’ Google Maps assistant de style de plateforme pour appliquer l’un des six thèmes prédéfinis ou créer un thème personnalisé. Vous pouvez générer un fichier JSON avec les propriétés de style map ou un lien vers la carte stylisée.
Modification du style de carte
-
Dans la barre latérale Admin, accédez à Stores > Settings>Configuration.
-
Dans le panneau de gauche sous General, choisissez Content Management.
-
Développez
-
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.
Modification des paramètres de carte
-
Pointez sur le conteneur de mappage pour afficher la boîte à outils et sélectionnez l’icône Paramètres (
-
Modifiez les paramètres de base selon les besoins :
table 0-row-2 1-row-2 2-row-2 layout-auto Option Description Height Indique la hauteur de la carte affichée en pixels. Show Controls Détermine si les commandes Google Map standard s’affichent. -
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 :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.
Modifier la taille de la grille
La taille de la grille détermine la taille de la carte associée à une colonne sur la scène Page Builder. Par défaut, la carte est large de 12 colonnes, avec un maximum de 16 colonnes.
-
Dans la barre latérale Admin, accédez à Stores > Settings>Configuration.
-
Dans le panneau de gauche sous General, choisissez Content Management.
-
Développez
-
Mettez à jour les options de grille selon les besoins :
note note NOTE Si nécessaire, décochez la case Use system value pour modifier ces paramètres. -
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.
-
-
Une fois l’opération terminée, cliquez sur Save Config.