Comment ajouter Google Maps sur un site WordPress (le moyen le plus simple)

L'ajout d'une carte Google Map sur votre site Web permet non seulement aux visiteurs de trouver facilement l'emplacement de votre entreprise, mais ajoute également une touche de professionnalisme et de fonctionnalité. 

Mais comment ajouter Google Maps dans le site WordPress? 🤔

Ne t'inquiète pas! Nous allons montrer la méthode la plus simple :

• Utilisation d'un plugin WordPress (ElementsKit)

Vous vous demandez peut-être pourquoi ElementsKit ? 

Eh bien, il propose un widget Google Map que vous pouvez insérer simplement glisser déposer. De plus, vous obtiendrez d'énormes options de personnalisation pour personnaliser votre Google Map afin qu'elle ressemble exactement à ce que vous souhaitez. Vous n’avez donc pas besoin d’être un as du codage pour y parvenir !

Allons-y ! 🥳

Qu'est-ce que Google Maps ?

Google Maps est un service de cartographie Web développé par Google pour afficher des emplacements et des directions précis pour n'importe quelle adresse. 🗺️

Google Maps est un service de cartographie Web développé par Google pour afficher des emplacements et des directions précis pour n'importe quelle adresse. Vous pouvez voir des images satellite, des plans de rues et Vues panoramiques à 360° de rues. En outre, Google Maps propose également les conditions de circulation en temps réel et les meilleure planification d'itinéraire pour voyager à pied, en voiture, à vélo ou en transports en commun. 🛣️🚦

Alors, comment fonctionne Google Maps ? Eh bien, Google Maps fonctionne principalement à l'aide d'un combinaison complète d'images satellite et terrestres. Dans le même temps, il collecte en permanence les commentaires des utilisateurs pour procéder à un processus de validation et reste à jour en fonction des changements constants. conditions en temps réel. ⏳

Comment ajouter Google Maps sur un site WordPress en 5 étapes 

Le moyen le plus simple d’intégrer Google Maps dans WordPress consiste à utiliser un plugin WordPress. L'intégration manuelle est également possible, mais il est difficile d'obtenir toutes les fonctionnalités et options de personnalisation sans plugin.

Pour ajouter Google Maps à votre site WordPress, le Plugin WordPress ElemenetKit est le meilleur choix. Il s'agit d'un module complémentaire Elementor tout-en-un ultime pour le site Web WordPress qui a déjà atteint le Jalon de plus d'un million d'installations actives. 

Tu auras 85+ widgets Elementor personnalisés avec la carte Google. Avec plusieurs types de styles de carte, vous trouverez de nombreuses options de personnalisation qui conviendront certainement à vos préférences, au type de site Web ainsi qu'aux besoins des utilisateurs.

Explorons le simple 5 étapes pour ajouter Google Maps sur un site WordPress à l'aide du plugin ElementsKit ! 🙌 

✨✨ Exigences 
✅Élémenteur – Télécharger Elementor
✅ ElementsKit Lite – Télécharger ElementsKit Lite
✅ ElementsKit Pro – Obtenez ElementsKit Pro
✅ API Google Maps – Obtenez l'API Google Map

Étape 1 : Installer le plugin ElementsKit 

Le processus d'installation d'ElementsKit est similaire à toute autre installation de plugin dans WordPress. Vous pouvez directement l'installer et l'activer ou télécharger le fichier zip du plugin, puis installer et activer la licence. Pour installer ElementsKit, 

• Accédez à votre tableau de bord WordPress 
• Cliquer sur Plugins ➔ « Ajouter un nouveau » 
• Téléchargez le Plugin WordPress ElementsKit Compressez le fichier et téléchargez le fichier 
• Ou recherchez Module complémentaire ElemenetsKit  dans le champ de recherche
• Cliquez ensuite sur "Installer"
• Une fois installé, cliquez sur "Activer"

🎯 Comme la fonctionnalité Google Map est un widget professionnel d'ElementsKit, vous devez acheter un package premium et activer la licence. 

👉 Voici le guide de documentation sur comment acheter et activer la licence ElementsKit Pro. 

Étape 2 : générer une clé API Google Map

Maintenant, tu dois générer la clé API Google Map pour vous connecter à votre site WordPress. L'API Google Maps (Application Programming Interface) est un code unique donné par Google pour intégrer et utiliser la fonctionnalité Google Maps dans vos propres sites Web ou autres applications. 

• Aller vers Configurer dans Cloud Console
• Cliquer sur "Créer un nouveau projet"

• Écrivez votre nom du projet et emplacement 
• Cliquer sur "CRÉER"

• Il sera redirigé vers le menu hamburger
• Sélectionnez le "API et services » option
• Cliquer sur « ACTIVER LES API ET LES SERVICES »

• Recherche Carte dans le champ de recherche
• Ou cliquez sur le  « API Cartes JavaScript »

• Si vous ne disposez pas des forfaits premium, vous devez Configurez votre compte avec les informations nécessaires (pays, détails de la carte, adresse de facturation, etc.)

• Ensuite, activez le API JavaScript de cartes 
• Maintenant, allez au Google Maps Platform ➔ Page d'informations d'identification
• Sélectionner un projet ou vous pouvez également créer un nouveau projet d'ici
• Cliquer sur « Créer des informations d'identification », et cela générera un nouveau Clé API pour toi

• Ensuite, cliquez sur Créer des informations d'identification ➔ Clé API
• Vous pouvez voir la clé API nouvellement créée pour Google Maps répertoriée sur la page Informations d'identification sous Clés API
• Copie la clé API à partir d'ici
• Cliquez sur Fermer

❗❗N'oubliez pas de restreindre l'API clé avant de l'utiliser sur votre site WordPress❗❗

Étape 3 : Connectez la clé API Google Map à ElementsKit 

Maintenant, tu dois connectez la clé API Google Map nouvellement créée sur votre site WordPress. Pour ce faire, vous devez coller la clé API dans la section Google Map d'ElementsKit. 

• Accédez à votre tableau de bord WordPress 
• Cliquer sur « Kit d'éléments » 
• Allez au « WIDGETS » option
• Faites défiler vers le bas, vous pouvez voir le widget Google Map  
• Allume le "Google Map" widget 
• Cliquer sur "Sauvegarder les modifications"

• Naviguer  « ElementsKit » ➔ « Paramètres utilisateur »
• Faites défiler vers le bas et cliquez sur le "Google Map" option 
• Collez la clé API sur le champ de saisie 
• Cliquer sur "Sauvegarder les modifications"

Étape 4 : faites glisser et déposez le widget Google Map dans la page/la publication

Il est maintenant temps de voir comment ajouter Google Maps dans un site WordPress par simple glisser-déposer :

• Créer un nouveau page/article ou ouvrez une page/article existant 
• Cliquer sur "Modifier avec Elemetor" 
• Rechercher le "Google Map" widget d'Elemenetkit 
• Glisser déposer le widget à l'intérieur du bloc où vous souhaitez afficher la carte

🟢 Remarque : Vous pouvez ajouter plusieurs cartes et les personnaliser individuellement à l'aide du même widget. Tout ce que vous avez à faire est de sélectionner un bloc Elementor, puis de glisser-déposer le widget Google Map. 🟢

Étape 5 : Personnalisez les paramètres de Google Map 

Maintenant, la dernière étape consiste à personnaliser Google Maps selon vos préférences. ElementsKit offre des tonnes d'options de personnalisation, notamment contenu, style et paramètres avancés pour la mise en page, les effets de mouvement, la réactivité, le CSS personnalisé, etc. 

Voyons comment vous pouvez personnaliser Google Maps à l'aide des options de personnalisation d'ElementsKit sur votre site Web WordPress. 

Personnalisation du contenu 

Dans cette section, vous pouvez sélectionner le type de carte et le type d'adresse, et définir une latitude et une longitude personnalisées pour ajouter l'adresse que vous souhaitez afficher sur votre site Web. Il existe également des options de personnalisation pour les marqueurs de carte, les contrôles et les thèmes. 

🌎 Type de carte 

ElementsKit propose des plates-formes de cartographie polyvalentes à partir de ce seul widget. Vous pouvez sélectionner le type de carte dans la section déroulante. 

• Cliquez sur Paramètres ➔ Sélectionnez le type de carte  

Ici vous pouvez obtenir 7 types de cartes Google, tel que:

1️⃣ De base : Avec la fonctionnalité de base de Google Map, les utilisateurs de votre site Web peuvent rechercher des emplacements, afficher des cartes et obtenir des itinéraires vers diverses destinations. 

Si vous êtes débutant et que vous souhaitez ajouter une simple carte Google Map à votre site WordPress avec un marqueur, optez pour le type de carte de base. 

2️⃣ Marqueur multiple : L'utilisation de plusieurs cartes Google Maps est idéale pour vous si vous planifiez des voyages ou mettez en évidence différents emplacements. Les visiteurs de votre site Web peuvent marquer et étiqueter plusieurs points d'intérêt sur une seule carte. 

3️⃣ Statique : Grâce à la fonctionnalité de cartes statiques d'ElementsKit, vous pouvez proposer à vos utilisateurs de générer une image statique d'une carte. Ce type de carte peut être intégré à vos sites WordPress si vous le souhaitez partager la visualisation hors ligne. 

4️⃣ Polyligne :  vous utilisez Google Maps de type Polyligne dans votre site WordPress pour permettre aux utilisateurs de créer et d'afficher lignes sur la carte pour voir les itinéraires, les limites ou les zones d'intérêt spécifiques.

5️⃣ Trop : Le widget Google Maps d'ElementsKit prend également en charge la fonctionnalité d'intégration de superposition. En utilisant ce type de carte, vous pouvez afficher la superposition donnée supplémentaire telles que des informations météorologiques, les conditions de circulation ou des couches personnalisées sur la carte pour une visualisation améliorée. 

6️⃣ Avec itinéraires : Lorsque vous utilisez la carte des itinéraires d'ElementsKit, les visiteurs de votre site Web peuvent saisir leur points de départ et d'arrivée pour obtenir des instructions détaillées étape par étape. De plus, ils peuvent voir le temps de trajet estimé et les mises à jour du trafic en temps réel. 

Cela vous aidera à connaître leur distance par rapport à votre emplacement, ou sera plus approprié lorsque vous devrez ajouter plusieurs adresses de bureaux/succursales à votre site Web.

7️⃣Panorama : Vous pouvez également afficher la vue panoramique à l'aide du widget Google Map d'ElementsKit. Les vues panoramiques, également connues sous le nom de Street View, offriront aux utilisateurs une Virtuel à 360 degrés visite de divers lieux. Cela permettra aux visiteurs du site Web d'explorer des lieux comme s'ils y étaient physiquement présents.

👉👉 Pour chaque type de personnalisation de carte en détail, vous pouvez consulter cette documentation – Carte Google sur le site WordPress.

📌Type d'adresse 

Pour chaque type, vous pouvez sélectionner le type d'adresse comme adresse en écrire directement le nom du lieu ou en définissant la latitude et la longitude de l'adresse respective. 

Cependant, la latitude et la longitude sont les coordonnées géographiques pour représenter un endroit spécifique sur la surface de la Terre. 

La latitude est la mesure de la distance d'un point au nord ou au sud de l'équateur. D'autre part, la longitude définit la mesure de la distance d'un point est ou ouest du Premier Méridien.

Obtenez la latitude et la longitude : 

• Aller à https://www.google.com/maps/
• Cherche le nom de votre emplacement
• Clic-droit sur le point précis de la carte
• Tu peux voir le valeurs de Latitude (à gauche) et de Longitude (à droite)
• Maintenant copie la latitude et la longitude
• Suivant, pâte les dans leurs champs de saisie

🔖 Paramètres du marqueur 

Ici, vous pouvez personnaliser les options de marquage de l'emplacement à l'aide du titre, du contenu, de l'icône, etc. 

• Ajouter un Titre de la carte Google pour afficher le nom pendant que quelqu'un recherche votre position
• Écrivez du contenu avec 1 à 2 lignes pour décrire l'adresse en survolant la carte 
• Activez la bascule pour ajouter un icône de marqueur personnalisé
• Téléchargez l'icône de marqueur, vous pouvez utiliser le logo de votre entreprise ou d'autres icônes pour décrire votre identité 
• Ensemble largeur et hauteur personnalisées pour l'icône du marqueur 

🟢 Pour Google Map de type plusieurs marqueurs, vous pouvez télécharger et personnaliser plusieurs icônes pour chaque emplacement. 🟢

🎛️ Contrôles

Vous pouvez contrôler le niveau de zoom, la vue sur la rue, le type de carte, le défilement de la carte, etc. à partir de ce paramètre. 

• Contrôler le niveau de zoom : Fournissez n’importe quel nombre pour définir le niveau de zoom.
• Activer le contrôle Street View : Activer l'affichage de la carte avec Street View.
• Activez le contrôle du type de carte : Activez cette option pour permettre à l'utilisateur de contrôler le type de carte, par exemple feuille de route, satellite, etc.
• Activer le contrôle du zoom : Activez pour ajouter une icône de contrôle de zoom pour zoomer (+) et dézoomer (-) sur la carte.
• Activer le contrôle plein écran : Activer cette option permettra à l'utilisateur de voir la carte en mode plein écran.
• Activer le zoom avec la molette de défilement : L'activation de la molette de commande de défilement augmentera ou diminuera le facteur de zoom de 10% pour chaque clic, vers le haut ou vers le bas.

🎨 Thèmes

Vous pouvez personnaliser la source et les styles du thème Google Map. De plus, si vous pouvez ajouter un thème personnalisé, cela est possible dans le widget ElementsKit Google Map. 

✨ Source du thème standard Google 

• Cliquez sur le thème ➔ Sélectionnez le type de source : norme Google  
• Sélectionnez les styles de thème standard dans la section déroulante :
  • Standard, Argent, Rétro, Foncé, Nuit et Aubergine

✨ Source du thème Snazzy Maps 

• Si vous souhaitez ajouter différentes combinaisons de couleurs, Snazzy Map est faite pour votre site. 
• Cliquez sur le thème ➔ Sélectionnez le type de source : Snazzy Maps
• Sélectionnez les styles dans la section déroulante :
  • Par défaut, simple, coloré, complexe, foncé, niveaux de gris, monochrome, sans étiquette et deux tons 

✨ Thème personnalisé

• Vous pouvez également ajouter un thème personnalisé selon vos préférences et vos besoins. 
• Choisir la source du thème ➔ Personnalisé
• Ajouter un style de thème personnalisé sur le champ donné 
• Cliquer sur "Cliquez ici" pour obtenir le code de style JSON du style sélectionné 

Personnalisation du style

Vous bénéficierez d'une flexibilité totale pour définir une hauteur, une largeur et un alignement de carte personnalisés en fonction de la conception de la page Web. 

➡️ Hauteur : Définir une hauteur personnalisée pour la carte

➡️ Largeur : Ajustez la largeur selon vos préférences

➡️ Alignement : Définir l'alignement de la carte Google à gauche, à droite ou au centre

Personnalisation avancée 

Vous pouvez contrôler tous les styles de mise en page de la carte et d'autres fonctionnalités et les personnaliser à partir des paramètres avancés du widget ElementsKit Google Map. 

⏺️ Définissez des valeurs personnalisées pour le mise en page entière largeur, marge, remplissage, position et z-index 

⏺️ Ensemble effets de mouvement pour les champs de saisie (par exemple zoom avant, zoom arrière, fondu entrant, fondu sortant, etc.)

⏺️ Choisissez la mise en page type et couleur d'arrière-plan

⏺️ Personnalisez le type de bordure, rayon, masque et réactivité de l'appareil (PC, onglet, mobile)

⏺️ Insérer attributs et CSS personnalisés pour des fonctionnalités supplémentaires 

5 avantages de l'insertion de Google Maps dans un site Web WordPress 

L'ajout de Google Maps à votre site Web offre de nombreux avantages. Voici les 5 avantages majeurs d'intégrer Google Maps sur votre site WordPress :

1. Augmente la visibilité de l'entreprise 

Lorsqu'un visiteur arrive sur votre site Web, Google Maps l'aide à visualiser votre position et donner une idée claire de l'endroit où se situe votre entreprise. 

Car cette fonctionnalité est particulièrement utile pour les entreprises disposant de vitrines physiques ou de bureaux. Ainsi, si vous avez plusieurs succursales, vous pouvez les présenter sur une seule carte. 

Cela aidera vos clients à découvrir de nouvelles succursales et à proximité. Ils peuvent simplement cliquer sur les marqueurs pour obtenir l'adresse et l'itinéraire vers chaque emplacement. 

En conséquence, vous pouvez augmenter votre visibilité de l'entreprise auprès des clients potentiels sur votre site WordPress. 

2. Fournit des directions précises 

L'un des principaux avantages de l'intégration de Google Maps dans votre site Web WordPress est de fournir des instructions précises à votre entreprise. Les visiteurs peuvent saisir leur position actuelle et recevoir des instructions étape par étape vers votre position. 

Cette fonctionnalité est très pratique pour les clients qui ne connaissent pas la région ou qui dépendent des transports en commun. Des instructions précises permettent de garantir que les clients potentiels peuvent facilement atteindre votre entreprise sans tracas ni confusion. 

3. Présente le référencement local

Optimisation des moteurs de recherche locaux (SEO) est crucial pour les entreprises ciblant une zone géographique spécifique. En intégrant Google Maps à votre site Web WordPress, vous pouvez afficher l'emplacement de votre entreprise dans les résultats de recherche. 

Selon des études récentes, environ 46% de toutes les recherches ont une intention locale. Cela indique que les internautes recherchent les entreprises, services ou produits les plus proches.

Ainsi, l'ajout d'une carte Google Map augmentera vos chances d'apparaître dans le pack local ou pack de cartes. Il s'agit de la section des résultats de recherche qui affiche une carte avec les entreprises locales liées à la requête de recherche. 

En conséquence, vous pouvez exploiter cette vaste audience de recherche locale et améliorer vos chances d’attirer des clients locaux. 

4. Facilite la planification d'événements 

L'intégration de Google Maps dans votre site WordPress peut simplifier le processus de planification d'événements pour vous et vos participants pour tout événement ou rassemblement professionnel. Vous pouvez intégrer une carte sur la page de votre événement pour fournir le emplacement et directions précis au lieu. 

Cette volonté économisez du temps et des efforts à vos visiteurs en recherchant le lieu séparément. De plus, vous pouvez inclure des marqueurs pour les arrêts de transports en commun, les zones de stationnement ou les hébergements à proximité, afin de permettre aux participants de planifier encore plus facilement leur visite. 

5. Améliorez la confiance, la crédibilité et l'expérience utilisateur 

Enfin et surtout, lorsque vous avez une adresse sur Google Maps, cela contribue à instaurer la confiance entre les visiteurs. Il fait preuve de transparence et fournit aux clients une preuve visuelle de votre existence. 

En outre, lorsque les visiteurs peuvent voir facilement votre emplacement, ils sont plus susceptibles de faire confiance à votre entreprise, surtout s'ils peuvent trouver des avis et des notes positifs associés à votre emplacement.

De plus, l’ajout d’une Google Map à votre site WordPress peut vous aider à accroître la marque de manière honorable ainsi que de fluidifier l'expérience utilisateur grâce à une orientation précise de votre lieu d'affaires. Cela réduira le besoin pour les utilisateurs de basculer entre les plates-formes pour trouver un itinéraire ou rechercher votre entreprise sur des services de cartographie externes. 

En gardant les visiteurs sur votre site Web, vous pouvez fournir un expérience transparente, augmentant les chances de conversions et la satisfaction des clients.

🔔 Les gens lisent aussi – Créer un téléscripteur d'actualités dans WordPress : 3 étapes faciles

5 meilleures pratiques pour utiliser Google Maps dans WordPress

Voici les 5 bonnes pratiques pour utiliser Google Maps dans les sites WordPress afin d'améliorer l'expérience utilisateur et de garder une longueur d'avance sur les jeux de référencement. 

✔️ Assurer le bon placement de la carte

Un placement approprié de la carte est crucial à la fois pour la convivialité et optimisation des moteurs de recherche (SEO). Par exemple, vous pouvez afficher votre carte de localisation sur le page de contact ou le pied de page. 

Il n'y a pas de règles strictes pour le placement des cartes sur votre site Web, vous devez simplement placer votre carte à un endroit où elle se trouve. facile pour les visiteurs à trouver et à utiliser.  

✔️ Optimisez le temps de chargement et les performances de la carte

Assurez-vous que vous avez optimisé le temps de chargement de la carte. Parce qu'une carte à chargement lent peut être frustrante pour les visiteurs et peut également nuire à votre référencement. 

Vous pouvez utiliser un plugin Google Maps léger avec toutes les options de personnalisation comme ElementsKit. Si vous utilisez une méthode alternative au lieu d'un plugin, réduire et compresser JavaScript et CSS fichiers avant de publier la Google Map sur votre site Web. 

✔️ Garantir une conception réactive pour les appareils mobiles

La réactivité de l’appareil est indispensable. Assurez-vous que la carte ajuste automatiquement sa taille et sa mise en page en fonction de vos besoins. s'adapte à toutes les tailles d'écran par exemple un PC, un onglet ou un téléphone portable. 

Ceci est important pour garantir que les visiteurs ont un bonne expérience visualiser votre carte non seulement sur PC ou sur grands écrans, mais également sur des appareils mobiles.

✔️ Garantir le respect des conditions générales de l'API Google Maps

Google Maps a un ensemble de termes et conditions que vous devez les accepter et les suivre. 

Ces termes et conditions expliquent comment vous pouvez utiliser Google Maps et leurs autres règles. Il est donc important de lisez-les attentivement avant d'utiliser l'API.

✔️ Maintenir la version mise à jour du plugin Google Maps

Google Maps publie régulièrement de nouvelles versions de son API. Ces versions incluent nouvelles fonctionnalités et corrections de bugs. 

Il est donc important de conserver votre plugin Google Maps à jour de assurez-vous que vous utilisez la dernière version de l'API et que vous ne manquez aucune nouvelle fonctionnalité.

📢 Voir aussi – Quoi de neuf dans WordPress 6.2 : 11 fonctionnalités majeures et au-delà !

FAQ

Pourquoi est-il important d’ajouter au site WordPress ? 

L'ajout de Google Maps à votre site Web WordPress peut améliorer le référencement local de votre site Web, renforcer la confiance des visiteurs, augmenter le trafic du site Web et offrir une meilleure expérience utilisateur à vos visiteurs.

Comment créer un shortcode Google Map dans WordPress ?

Pour créer un shortcode Google map dans WordPress, 

• Aller vers Google Map
• Recherchez l'emplacement souhaité 
• Aller vers  « Partager » ➔ « Intégrer une carte »
• Copie le code HTML embarqué
• Maintenant, créez ou ouvrez une page/une publication existante
• Ajouter un nouveau bloc HTML personnalisé
• Pâte le code embarqué dans ce bloc
• Ce code iFrame intégré sera converti en shortcode lorsque vous modifiez la page ou publiez

Comment ajouter Google Maps sur un site WordPress sans plugins ?

Vous pouvez utiliser Google Mes cartes et créez une nouvelle carte pour ajouter des fonctionnalités de base de carte à votre site Web WordPress sans installer de plugins. En outre, vous pouvez utiliser la méthode iFrame/shortcode par défaut pour intégrer le code HTML de votre emplacement préféré Google Map dans la page Web. 

Pourquoi Google Maps ne fonctionne-t-il pas sur mon site WordPress ?

Google Maps peut ne pas fonctionner sur votre site WordPress en raison d'une configuration incorrecte de la clé API, de problèmes d'authentification ou de conflits avec d'autres plugins ou thèmes. Il est donc recommandé de vérifier les paramètres de la clé API, d’utiliser la version mise à jour des plugins et de garantir la compatibilité avec d’autres plugins/thèmes.

Envelopper

Pour augmenter la visibilité de votre entreprise, renforcer la confiance des visiteurs, stimuler le référencement local et générer plus de trafic vers votre site Web, en ajoutant Google Maps vers le site WordPress est une solution efficace.

Et maintenant vous savez « comment ajouter Google Maps dans un site WordPress » n’est pas sorcier. En suivant ce qui précède 5 étapes avec ElementsKit et l'API Google Map, vous pouvez facilement intégrer une ou plusieurs cartes de localisation dans votre site Web. Assurez-vous simplement que vous suivez également les meilleures pratiques lors de l'intégration de Google Maps dans votre site. 

Si vous avez des questions ou des suggestions, faites-le-nous savoir et nous serons heureux de vous entendre. Merci d'avoir lu!