Besoin de trouver comment ajouter Google Maps à WordPress avec JetElements?

Il existe un tas de plugins que vous pouvez utiliser pour ajouter Google Maps à votre site web WordPress. JetElements en est un. JetElements est un module complémentaire Elementor premium développé par Crocoblock. Il ajoute plusieurs widgets supplémentaires à votre Elementor, y compris Advanced Map que vous pouvez utiliser pour ajouter facilement Google Maps à votre site WordPress.

Vous pouvez sélectionner 10 styles de carte. Vous pouvez également ajouter plusieurs broches.

Dans cet article, nous vous montrerons comment utiliser le widget Advanced Map pour ajouter Google Maps à votre site web WordPress.

Avant de commencer, assurez-vous d’avoir installé Elementor et JetEements sur votre WordPress. Vous pouvez utiliser la version gratuite d’Elementor pour utiliser JetElements. Pendant que pour JetElements, vous devez l’acquérir sur son site web officiel pour $19.

Etape 1: obtenez la clé API Google Maps

Avant de pouvoir ajouter Google Maps à votre site Web à l’aide de JetElements, vous devez obtenir une clé API pour intégrer JetElements à Google Maps. Vous pouvez obtenir l’API via la console Google API. Alors, visitez Console API Google et connectez-vous avec votre compte Google.

Une fois connecté, créez un nouveau projet en cliquant sur le menu déroulant en haut et cliquez sur NOUVEAU PROJET.

Donnez un nom à votre projet et cliquez sur le bouton CRÉER.

Sélectionnez votre nouveau projet dans le menu déroulant et cliquez sur Bibliothèque sur le panneau de gauche.

ajouter Google Maps à WordPress avec JetElements

JetElements ne fournit aucune information détaillée sur les API que vous devez activer pour faire fonctionner le widget Advanced Map. Selon notre expérience, vous devez au moins activer les API suivantes:

  • Geocoding API
  • Maps JavaScript API

Google divise lui-même l’API de Google Maps en 17 types. Vous pouvez les voir en cliquant TOUT AFFICHER dans la section Cartes.

Pour activer une API, sélectionnez l’API que vous souhaitez activer ( en cliquant dessus ) et cliquez sur le bouton ACTIVER.

Une fois l’activation des API requises terminées, revenez au tableau de bord principal de la console Google API et cliquez sur Identifiants sur le panneau de gauche. Cliquez sur le bouton Créer des informations d’identification et sélectionner Clé API. Copiez la clé API sur le popup qui apparaît.

Ensuite, connectez-vous à votre tableau de bord WordPress et allez sur le menu JetPlugins – > JetElements Settings.

ajouter Google Maps à WordPress avec JetElements

Ouvrez l’onglet Intégrations et collez la clé API que vous venez de copier dans le champ Google Map API Key.

Commencez à ajouter la carte

Une fois JetElements et Google Maps intégrés, vous pouvez commencer à ajouter la carte. Pour ce faire, ouvrez la page sur laquelle vous souhaitez ajouter la carte dans Elementor. Sur l’éditeur d’Elementor, faites glisser le widget Advanced Map dans la zone d’édition.

ajouter Google Maps à WordPress avec JetElements

Vous pouvez aller dans le panneau de gauche pour manipuler certains paramètres sur votre carte. Vous pouvez effectuer les réglages à partir de la section Map Settings.

Pour modifier le style de carte, vous pouvez ouvrir la section Map Style.

ajouter Google Maps à WordPress avec JetElements

Ajouter votre localisation à la carte

Par défaut, l’adresse de la broche est définie sur London Eye, London, United Kingdom. Vous pouvez la modifier pour ajouter la localisation de votre entreprise.

Pour ce faire, ouvrez la section Pins et cliquez sur l’adresse de la broche existante. Collez l’adresse de votre entreprise dans le champ Pin Address et modifier la description dans le champ Pin Description.

ajouter Google Maps à WordPress avec JetElements

Pour que l’adresse de la broche que vous venez de définir soit visible sur la carte, vous devez définir le centre de la carte. Par exemple, si votre emplacement commercial est à Paris, vous devez définir le centre de la carte sur Paris.

Pour définir le centre de la carte, ouvrez la section  Map Settings encore une fois tapez votre centre de carte préféré ( nom de ville).

ajouter Google Maps à WordPress avec JetElements

Remarque: Si vous voyez un message “ Pour des fins de développement uniquement ” lors de l’ajout d’une carte, assurez-vous d’activer votre facturation Google Cloud. La nouvelle politique Google oblige les développeurs à activer le compte de facturation ( vous pouvez toujours utiliser l’API Google Maps gratuitement ).

Obtenez Elementor Pro Maintenant !!!

Conclusion

Voila ! C’est tout pour cet article qui vous montre comment ajouter Google Maps à WordPress avec JetElements. Si vous avez des soucis sur comment y arriver faites le savoir dans les commentaires.

Cependant, vous pourrez aussi consulter nos ressources, si vous avez besoin de plus d’éléments pour mener à bien vos projets de création de sites internet, en consultant notre guide sur la création de blog WordPress ou celui sur Divi : le meilleur thème WordPress de tous les temps.

Mais en attendant, partagez cet article sur vos différents réseaux sociaux.