Dans un monde de plus en plus connecté, avoir un emplacement physique ne signifie pas seulement mettre une adresse sur votre site Web. Cela signifie créer un pont transparent entre votre présence en ligne et le monde réel. Que vous dirigiez une entreprise locale, organisiez des événements ou souhaitiez simplement permettre aux gens de vous trouver plus facilement, l'intégration de Google Maps sur votre site Web est une étape essentielle.
Avec l'éditeur de blocs Gutenberg, ajouter Google Maps sur WordPress était auparavant un défi. Cependant, dans ce guide, nous vous montrerons la manière la plus simple d'ajouter Google Maps avec l'éditeur de blocs Gutenberg sur WordPress.
Comment ajouter des cartes Google Maps WordPress avec l'éditeur de blocs Gutenberg?
Integrating Google Maps into your WordPress site can significantly enhance user experience by providing location-based information and easy navigation.
Tools Used: GutenKit Pro plugin and a block editor theme.
✅ Step 1 – Generate a Google Map API key for your website: Create a new project in Google Cloud Console → Enable API services for Google Maps → Generate an API key.
✅ Step 2 – Add Google Maps to your WordPress site: Add Google Maps API key to WordPress and enable WordPress Google Maps blocks from GutenKit.
✅ Step-3 – Use WordPress maps block to embed Google Map into your website: Drag and drop the Google Maps block in the Gutenberg block editor.
✅ Step-4: Customize the WordPress Google Maps appearance in the Gutenberg block editor: Choose the map type and address type, then customize the appearance.
By embading Google Maps you can Improve accessibility and make it easier for visitors to find locations.
Pourquoi ajouter Google Maps à votre site Web ?
As of early 2026, over 2 billion users are actively using Google Maps.[Source] So, integrating Google Maps into your WordPress site can significantly enhance user experience.
Maps on the website provide interactive and real-time location information. Whether you’re running a business website, a travel blog, or an event page, having an embedded map can offer immense value to your visitors.
Voici pourquoi l’intégration de Google Maps est une décision intelligente :
- Améliorez l'expérience utilisateur en fournissant des informations basées sur la localisation et une navigation facile.
- Améliorer l’accessibilité et permettre aux visiteurs de trouver plus facilement des emplacements physiques.
- Renforcez la crédibilité et la confiance auprès des clients.
- Améliorez le référencement local en intégrant l'emplacement de votre entreprise sur le site Web.
Comment ajouter Google Maps dans WordPress avec l'éditeur de blocs Gutenberg
En ce qui concerne l'éditeur de blocs Gutenberg, l'ajout de Google Maps sur WordPress était auparavant difficile et nécessitait un codage complexe. Cependant, avec GutenKit, vous disposez du moyen le plus simple d'intégrer Google Maps dans l'éditeur de blocs WordPress.
GutenKit empowers the WordPress block editor with 65+ advanced blocks, 20+ useful modules, and 900+ professional templates. Within a visual builder interface, it facilitates mega menu, query loop builder, dynamic content, responsive breakpoints, particles, parallaxes, etc to functional WordPress websites.
L'ajout de Google Maps à votre site WordPress à l'aide de l'éditeur de blocs GutenKit est simple. Il vous suffit d'obtenir une clé API Google Map pour le site Web et d'utiliser un bloc de carte WordPress pour afficher Google Maps avec l'éditeur de blocs Gutenberg. Entrons maintenant dans les détails :
Plugin requis :
- GutenKit Gratuit : Télécharger le plugin
- GutenKit Pro : Obtenez le plugin
Note: Le bloc Google Maps est une fonctionnalité premium de GutenKit. Vous devez donc disposer à la fois de la version gratuite et de la version Pro du plugin GutenKit.
Étape 1 : Générez une clé API Google Map pour votre site Web
Pour intégrer Google Maps à votre site Web, vous devez générer une API Google Map.
➡️ 1.1 Créer un nouveau projet
- Allez au Page Clés et informations d'identification de la plateforme Google Maps de votre Google Cloud Console.
- Clique sur le Créer un projet pour ouvrir un nouveau projet.
- Pour le nouveau projet, entrez le Nom du projet et fichier Emplacement de l'organisation ou du dossier parent.
- Cliquez ensuite sur le Créer Bouton.
➡️ 1.2 Activer les services API pour Google Maps
Après avoir créé le projet, accédez à API et services > Activer les API et les services. Sur l’écran suivant, cliquez sur «+ Activer les API et les services" pour accéder à la page de la bibliothèque API.
Sur la page de la bibliothèque API, recherchez le API JavaScript de cartes, ou utilisez la barre de recherche pour le trouver. Une fois que vous l'avez trouvé, cliquez dessus et activez l'API.
➡️ 1.3 Générer une clé API
Après cela, accédez à nouveau au tableau de bord et accédez à API et services > Informations d'identification. Dans les sections Informations d'identification,
- Clique sur le + Créer des identifiants
- Sélectionner Clé API
Une fenêtre contextuelle affichera votre clé API. Enregistrez et Copier la clé API pour plus tard.
Étape 2 : Ajoutez Google Maps à votre site WordPress
Dans cette étape, vous devez intégrer la clé API Google Maps à votre site Web et activer le blocage Google Maps.
➡️ 2.1 Activer les blocs WordPress Google Maps depuis GutenKit
Après avoir obtenu une clé API Google Map pour votre site Web, connectez-vous à votre tableau de bord WordPress et accédez à GutenKit > Paramètres > Intégration API, et entrez votre clé API Google Maps. Cliquez ensuite sur le Sauvegarder les modifications bouton.
➡️ 2.2 Activer les blocs WordPress Google Maps depuis GutenKit
Une fois la clé API saisie, vous pourrez ajouter des blocs Google Maps dans WordPress. Suivez les étapes ci-dessous pour afficher Google Maps avec l'éditeur de blocs Gutenberg.
Pour activer Google Maps pour Gutenberg :
- Aller vers GutenKit > Blocs
- Trouver Google Maps bloc.
- Activez le bouton bascule.
Voilà, vous pouvez désormais utiliser le bloc Google Maps de WordPress dans l'éditeur Gutenberg.
Étape 3 : utilisez le bloc de cartes WordPress pour intégrer la carte Google à votre site Web
Vous pouvez désormais ajouter le bloc Google Maps à votre page Web et personnaliser son apparence sans effort. Améliorez l'interactivité de votre site et fournissez des informations de localisation précises en toute simplicité.
Ouvrez n'importe quelle page Web de votre site Web en mode Éditeur. Après cela,
- Dans la barre latérale des blocs, recherchez Google Maps.
- Sélectionnez le bloc et ajoutez-le à votre site Web.
Étape 4 : Personnaliser l'apparence de Google Maps de WordPress dans l'éditeur de blocs Gutenberg
Une fois que vous avez ajouté le bloc WordPress Google Maps, vous pouvez personnaliser et décider comment il apparaîtra sur votre page Web.
Sous l'onglet Contenu, vous disposez des options suivantes :
Paramètres:
- Type de carte : Basique, Marqueurs multiples, Polyligne, Polygones, Superposition, Avec itinéraires, Panorama.
- Type d'adresse : Vous pouvez saisir votre adresse avec du texte ou utiliser les coordonnées cartographiques (latitude et longitude).
Marqueur:
- Titre: Saisissez un titre qui sera affiché dans la vue Cartes de votre site Web.
- Ajouter une icône de marqueur personnalisée : Vous pouvez afficher une icône de marqueur personnalisée avec une hauteur de marqueur personnalisée et une largeur de marqueur.
- Contrôles: Définissez le niveau de zoom et activez les contrôles Street View, le contrôle du type de carte, le zoom de la molette de défilement, le contrôle du zoom et le contrôle plein écran.
Thème:
Vous pouvez utiliser la valeur par défaut Thèmes Google, et un thème élégant pour afficher des cartes sur votre site Web.
Sous le Style Dans l'onglet, vous pouvez personnaliser la largeur, la hauteur et l'alignement du conteneur de carte pour Google Maps dans l'éditeur de blocs Gutenberg.
FAQ
➡️ Comment intégrer Google Maps dans WordPress Gutenberg ?
Vous pouvez intégrer Google Maps dans Gutenberg à l'aide du plugin de création de pages GutenKit. Contrairement à l'utilisation de plugins individuels pour Google Maps, utilisez ce plugin d'éditeur de blocs tout-en-un qui vous aidera à maintenir la vitesse de chargement de votre site à un niveau supérieur.
➡️ Do I need a Google Maps API Key to use the Gutenberg block?
Yes, for the Google Maps block to function correctly on your WordPress site, you must generate a Google Maps API Key. This key connects your website to Google’s mapping services. You can obtain this by creating a project in the Google Cloud Console, enabling the “Maps JavaScript API,” and generating the credentials to paste into your GutenKit settings.
➡️ Comment ajouter un bloc de carte dans WordPress ?
Vous devez saisir votre clé API Google Maps dans les paramètres. Activez ensuite le bloc de carte à partir du tableau de bord GutenKit sur votre site WordPress. Après cela, ouvrez n'importe quelle page de l'éditeur > cliquez sur le «+« dans l’éditeur > recherchez le bloc Google Maps et ajoutez-le à votre page Web.
➡️ What types of map views are available in the Gutenberg editor?
The GutenKit plugin offers several advanced map types beyond the standard view, including:
– Multiple Markers: To show various locations on a single map.
– Overlay/Polygons: To highlight specific areas or boundaries.
– Panorama (Street View): To provide a virtual 360-degree representation of the surroundings.
– Avec itinéraires : To display directions for walking, driving, or transit.
➡️ Is the Google Maps block available in the free version of GutenKit?
The Google Maps block is a premium feature of GutenKit. To use it, you will need to have both the Free version and the Pro version of the GutenKit plugin installed and activated on your WordPress site.
Plats à emporter
L'intégration de Google Maps dans votre site Web WordPress n'a jamais été aussi simple avec l'éditeur de blocs Gutenberg, en particulier lorsque vous utilisez le plugin GutenKit. En simplifiant le processus d'intégration de cartes interactives, GutenKit améliore non seulement l'expérience utilisateur, mais renforce également le référencement local et la crédibilité de votre site.
Que vous gériez une entreprise, organisiez des événements ou souhaitiez simplement rendre votre emplacement plus accessible, cette intégration comble le fossé entre votre présence numérique et physique. En quelques étapes simples, vous pouvez désormais personnaliser et afficher Google Maps de manière transparente, ajoutant ainsi une valeur immense à votre site WordPress.
Laisser un commentaire