Ajouter une carte Google Maps sur votre site ? Comment faire ?

L’ajout d’une carte Google Maps est un processus très puissant pour mettre en avant sa localisation et, dans le cas d'une boutique en ligne, peut ainsi facilité la venue de nouveaux clients. Un processus qui est loin d’être compliqué et qui peut avoir d’excellents retours sur votre activité professionnelle, alors pourquoi s’en priver ? Retrouvez notre article détaillé sur comment ajouter une carte Google Maps à votre site internet, le tout, en quelques clics.

Google Maps est l’un des services de cartographie en ligne les plus utilisés au monde, et pour cause, il est simple à utiliser et possède l’une des plus grosses bases de données sur ce sujet. Cet outil est directement lié au géant américain du web, j’ai nommé : Google et ce détail à son importance, puisque la localisation affichée sur ce moteur de recherche sera issue de Google maps. Cet élément souligne le caractère presque indispensable de cet outil, puisque rappelons que le moteur de recherche est utilisé par plus de 90 % de la population française. Le service propose plusieurs fonctionnalités telles qu’une vision par image satellite, des vues panoramiques, des planifications d’itinéraires et l’affichage des principales informations concernant les lieux. Un service complet et utilisable sur navigateur et mobile via l’application éponyme, d’ailleurs positionnée dans le top des apps Apple et Android sur ce sujet.

Pourquoi ajouter une carte Google Maps à son site internet ?

Cette introduction souligne à elle seule l’importance d’optimiser son utilisation de Google Maps d’un point de vue professionnelle. Cela peut avoir d’excellentes répercussions sur votre business, surtout si vous avez décidé de vous en servir correctement. Voici une liste non exhaustive des avantages à ajouter Google Maps sur votre site internet.

Optimisation du référencement naturel de votre site

Google Maps contribue grandement au référencement naturel de votre site. Bien évidemment, cette phrase est à nuancer selon votre site et votre audience. Mais quand on parle de SEO local, Google Maps et l’intégration de sa carte se révèle être une arme redoutable pour grimper dans les résultats de recherches. Le fait d’afficher clairement une carte sur votre site en plus de votre adresse va accentuer les facteurs positifs envers Google pour vous positionner de votre mot-clé + ville associée. 

Plus subtile, mais tout aussi utile, l’insertion d’une carte Google Maps aide au référencement naturel en boostant vos performances de pages. En effet, un utilisateur qui consulte une adresse (textuelle) sur votre site restera moins longtemps sur ce dernier, qu’un utilisateur qui regarde une adresse sur une carte. Cela lui permet également d’éviter une recherche supplémentaire en copiant-collant l’adresse. Cet allongement de la durée de consultation d’une page est un des critères de pertinences de Google dans le référencement de votre site. Dernier point à ce sujet, Google favorisera toujours les webmasters utilisant ses services, Google maps en faisant partie, vous marquez des points dans votre quête de séduction du géant du web.

Meilleure visibilité de votre activité physique

Au-delà du fait de mieux se positionner dans les résultats de recherches, disposer d’une carte Google maps sur votre site web vous donnera une meilleure visibilité pour votre activité. Cet élément vous permet de faire une excellente transition entre business en ligne et business physique, permettant la conversion de visiteurs issus du web en client réel. Le tracking de cette donnée est relativement compliqué à suivre, cependant les résultats sont bels et biens là si on regarde les chiffres de manière empirique. En plus d’améliorer la visibilité de votre activité physique, une carte Google Maps sur votre site permettra de renforcer votre identité de marque et donc de rassurer les potentiels clients présents sur votre site. En bref, une personne qui voit une carte sur le site associe directement cela à un business physique, donc une entité à qui il peut faire confiance s'il commande en ligne. Ne pas afficher clairement ce type d’informations peu se révéler très pénalisant sur un site internet.

Comment ajouter une carte Google Maps sur un site WordPress ?

WordPress est le CMS le plus utilisé au monde, savoir ajouter une carte Google Maps sur ce service est donc primordial. Compte tenu de la communauté active dont dispose le CMS, il existe plusieurs solutions pour intégrer ce type de carte.

Manuellement

Tout d’abord, vous pouvez ajouter manuellement une carte Google Maps à votre site WordPress, en maîtrisant (un petit peu) le code. Si le terme, balise html ne veut rien dire pour vous, le mieux sera de passer directement au paragraphe suivant.

1. Se rendre sur Google Maps et rechercher l’adresse souhaitée. 

2. Cliquez sur « Partager »

3. Sur la nouvelle fenêtre, cliquez sur <<intégrer la carte>>

4. Sélectionnez le design que vous souhaitez pour la carte (petite, moyenne, grande ou personnalisée)

5. Copiez le code html associé à votre choix

6. Ouvrez votre tableau de bord WordPress

7. Dans « Pages », sélectionnez celle à laquelle vous souhaitez ajouter la carte

8. Dans l’éditeur de texte WordPress, mettez-vous en version « Texte ». Pour les utilisateurs de l’éditeur Gutenberg, cliquez directement sur “ajouter un bloc html personnalisé”.

9. Collez le code à l’endroit où vous souhaitez que la carte soit affichée, puis enregistrez

Le processus est extrêmement simple, et même si les mots html et balise peuvent être impressionnants, l’action se fait facilement. En maîtrisant cela, vous pouvez disposer la carte où bon vous semble, sans l’intervention d’un quelconque module. La personnalisation de la carte en elle-même sera quant à elle plus compliquée.

Avec un plugin

La grande force de WordPress réside dans sa bibliothèque conséquente de plugins et extensions. Dans ce large choix, se cachent des extensions permettant l’intégration simplifiée d’une carte Google maps. Bien souvent, l’utilisation de tel plugin permet une personnalisation du design et des fonctionnalités plus grandes, à noter cependant, que certains d’entre eux sont payants. 

1. Cliquez sur votre dashboard WordPress

2. Dans la catégorie « Plugins », cliquez sur « ajouter »

3. Choisissez l’extension de carte Google maps de votre choix (liste ci-dessous)

4. Installez puis activez l'extension

5. Accédez directement à l’interface de contrôle du plugin installez

6. Insérez votre clé API Google maps ou entrez directement l’adresse souhaitée. 

7. Copiez le shortcode généré par le plugin

8. Collez le shortcode là où vous souhaitez afficher la carte

Pour vous aider dans la configuration de votre carte Google maps pour un site WordPress, voici une sélection de plugin très fonctionnel sur ce sujet : 

• Wp Google Maps

• Google Maps Easy

• Wp Google Maps Plugin

• Google Maps Widget

Comment ajouter une carte Google Maps sur un site Shopify ?

Shopify est un CMS quant à lui réservé aux ecommerçants, le but d’une carte Google map sera alors de rediriger sa clientèle en ligne vers son magasin physique. Les clients pourront alors essayer ou tester les produits affichés sur le site de ventes en ligne.

Ajout d’une clé Google API à votre thème

La première solution pour intégrer une carte à votre site Shopify et de se servir d’une clé API Google Maps. Cette fonctionnalité est disponible uniquement si votre thème dispose nativement d’une fonctionnalité incluant l’affichage de carte. Si ce n’est pas le cas, le mieux sera de faire une intégration manuelle à votre site Shopify. Partir avec l’intégration via API vous offrira ainsi les avantages évoqués précédemment, c’est-à-dire une meilleure personnalisation, interactivité et donc tout simplement une meilleure expérience utilisateur. Une fois la carte intégrée, vous allez devoir activer la section « map » correspondante dans votre éditeur Shopify. Ensuite, avec la fonction drag and drop du Shopify website Builder, vous allez pouvoir disposer la carte Google map sur la page concernée.

Intégration manuelle de la carte

Il est également totalement possible d’intégrer manuellement la carte Google Maps à votre site Shopify. Pour ce faire, vous allez devoir tout de même naviguer dans le code de votre thème, si vous n’êtes pas à l’aise avec cela, faites appel à un professionnel ou passez par l’intégration via API évoquée juste au-dessus.

Tout d'abord, rendez-vous sur le site de Google Maps. Tapez l'adresse que vous souhaitez afficher sur la carte dans la barre de recherche et appuyez sur Entrée. Google Maps vous montrera l'emplacement exact de l’adresse sur la carte associée. N’hésitez pas à affiner le positionnement du curseur pour plus de précision. 

Ensuite, cliquez sur le bouton "Partager" qui se trouve à gauche de la carte. Dans la boîte de dialogue qui apparaît, cliquez sur l'onglet "Intégrer une carte". Vous verrez un code HTML que vous pouvez copier.

Maintenant, rendez-vous sur votre site Shopify. Connectez-vous à votre compte et allez dans "Boutique en ligne", puis "Thèmes". Trouvez le thème qui est en ligne et que vous voulez modifier et cliquez sur "Actions", puis "Modifier le code".

Recherchez le fichier dans votre thème où vous voulez afficher la carte. Une fois que vous avez trouvé le bon endroit, collez le code HTML que vous avez copié de Google Maps.

Enregistrez vos modifications. Votre carte Google Maps devrait maintenant apparaître sur votre site Shopify à l'endroit que vous avez choisi.

Voici un exemple du type de balise évoqué : 

Elle affichera une adresse à Melbourne en Australie. avec une largeur de 600 et une hauteur de 450, avec des paramètres d’optimisations tels que le lazyloading ou l’affichage d’aucune bordure.

Comment ajouter une carte Google Maps sur les autres sites web ?

Pour ajouter une carte Google Maps à d’autres sites web, le processus restera à peu près le même que ceux évoqués précédemment. La seule différence réside dans la dénomination des pages à rechercher.

Jimdo

Pour ajouter une carte Google Maps sur votre site Jimdo, vous pouvez suivre les étapes suivantes :

1. Trouver l'emplacement sur Google Maps : Rendez-vous sur Google Maps et recherchez l'adresse que vous voulez ajouter à votre carte. Une fois que vous avez trouvé l'emplacement, cliquez sur le bouton « Partager » et ensuite sur l'onglet « Intégrer une carte ». Cela vous donnera une balise iframe que vous pouvez copier.

2. Ajouter la carte à votre site Jimdo : Connectez-vous à votre compte Jimdo et allez à la page où vous voulez ajouter la carte. Cliquez sur "Ajouter un élément" ou "Ajouter du contenu", puis sélectionnez « Widget/HTML ». Collez la balise iframe que vous avez copiée de Google Maps dans la zone de texte.

3. Enregistrer vos modifications : Cliquez sur "Enregistrer" pour sauvegarder votre nouvelle carte Google Maps. Vous devriez maintenant voir la carte sur votre site Jimdo à l'emplacement que vous avez choisi.

Magento

Pour Magento, la démarche à suivre est légèrement différente. L'intégration d'une carte Google Maps sur votre site Magento nécessite quelques étapes. Voici comment vous pouvez le faire :

1. Obtenir le code d'intégration de Google Maps : Rendez-vous sur Google Maps et recherchez l'adresse que vous souhaitez afficher sur votre site. Une fois que vous avez trouvé l'emplacement correct, cliquez sur le bouton « Partager », puis sélectionnez « Intégrer une carte ». Vous verrez un code HTML (une balise iframe) que vous pouvez copier.

2. Connexion à votre site Magento : Accédez à l'interface d'administration de votre site Magento.

3. Ajout du code d'intégration à votre site : Pour ajouter le code d'intégration, vous pouvez généralement l'insérer dans un bloc CMS. Pour cela, allez dans « Contenu » > « Éléments » > « Blocs ». Cliquez sur « Ajouter un nouveau bloc » et donnez-lui un titre, par exemple « google_map ». Ensuite, dans l'éditeur, cliquez sur « Afficher/ Masquer l'éditeur » et collez le code d'intégration que vous avez copié de Google Maps.

4. Utilisation du bloc dans votre site : Une fois que vous avez créé le bloc avec la carte, vous pouvez l'insérer dans une page ou un modèle de votre choix. Pour l'insérer dans une page, allez dans « Contenu » > « Pages" » trouvez la page où vous voulez ajouter la carte et éditez-la. Dans l'éditeur, vous pouvez insérer le bloc que vous avez créé en utilisant la directive de bloc appropriée. Par exemple, si votre bloc s'appelle « google_map », vous pouvez l'insérer avec {{block id='google_map'}}.

5. Enregistrez vos modifications : Une fois que vous avez inséré le bloc, n'oubliez pas d'enregistrer vos modifications.

Prestashop

L’intégration d’une carte Google Maps à Prestashop va différer en fonction de la version de ce dernier. En effet, certaines dénominations ont changé entre la version 1.6 et 1.7. Le processus reste globalement le même. 

1. Obtenir le code d'intégration de Google Maps : Rendez-vous sur Google Maps et recherchez l'adresse que vous souhaitez afficher sur votre site. Une fois que vous avez trouvé l'emplacement, cliquez sur le bouton « Partager », puis sur « Intégrer une carte ». Vous verrez un code HTML (balise iframe) que vous pouvez copier.

2. Connexion à votre back-office PrestaShop : Accédez à l'interface d'administration de votre site PrestaShop.

3. Ajout du code d'intégration à votre site : Pour ajouter le code d'intégration, allez dans « Conception » > « Pages CMS » si vous utilisez PrestaShop 1.7 (ou « Préférences » > « CMS » si vous utilisez PrestaShop 1.6). Vous pouvez créer une nouvelle page ou modifier une page existante. Dans le champ « Contenu », collez le code d'intégration que vous avez copié de Google Maps.

4. Enregistrez vos modifications : Une fois que vous avez ajouté le code, cliquez sur « Enregistrer » pour sauvegarder vos modifications.

Comment personnaliser sa carte Google Maps ?

Pour personnaliser au mieux la carte Google Maps présente sur votre site, le mieux sera certainement de passer via la clé API. En effet, cette dernière offre bien plus de flexibilité dans l’affichage et le design de votre carte. Vous pourrez ainsi choisir différents types d'affichages, comme une vision satellite, routière ou encore hybride.

Le second point sur lequel vous pourrez intervenir et le niveau de zoom de votre carte. Certaines activités nécessitent un zoom léger, afin de situer la grande ville la plus proche de l'adresse. Dans d’autres cas, le zoom doit être plus fort, voir réduit à un quartier.

La troisième fonctionnalité intéressante à personnaliser et l’affichage ou non de « marker » sur la carte. Cela permet de donner des indications sur les lieux alentours ou bien sur l’adresse en elle-même et donc de personnaliser encore un peu plus l’expérience utilisateur de votre site. 

D’un point de vue design, il est également possible de masquer certains éléments de la carte et de modifier les couleurs globales de cette dernière. Un outil qui vous permettra d’harmoniser la carte avec la charte graphique de votre site.