Vous cherchez un moyen d’intégrer le contenu de Google Maps sur votre site WordPress ?
Comme beaucoup de choses dans WordPress, il y a plusieurs façons différentes d’intégrer Google Maps sur votre site selon le type de contenu cartographique que vous souhaitez inclure.
Dans cet article, nous allons commencer par vous montrer comment ajouter Google Maps dans WordPress sans plugin. Ensuite, nous vous recommanderons quelques plugins qui peuvent vous aider à intégrer Google Maps, ainsi que certains des avantages de cette approche. Nous nous pencherons également sur la façon d’utiliser correctement l’API Google Maps, qui est maintenant obligatoire.
Enfin, nous terminerons par quelques considérations de performance pour l’utilisation de Google Maps sur WordPress et partagerons quelques conseils sur la façon de garder le chargement de votre site WordPress rapide même si vous avez besoin d’intégrer Google Maps.
Vous pouvez cliquer ci-dessous pour accéder directement à une section spécifique ou simplement lire l’ensemble de l’article.
- L’API Google Maps est maintenant requise
- Comment ajouter Google Maps dans WordPress sans plugin
- Plugins Google Maps WordPress qui vous donnent plus de flexibilité
- Les effets de Google Maps sur les performances et conseils pour améliorer les performances
L’API Google Maps est maintenant requise
Depuis le 11 juin 2018, une clé API est requise pour Google Maps. Si vous avez déjà implémenté Google Maps sur votre site et que cela ne fonctionne plus, cela pourrait en être la raison. Ou plutôt, il manque la clé de l’API. La bonne nouvelle, c’est que pour 99% d’entre vous, cela devrait toujours être gratuit. Vous trouverez ci-dessous les tarifs de l’API Google Maps.
Google vous donne également un crédit récurrent de 200 $ sur votre compte de facturation chaque mois pour compenser vos coûts d’utilisation. Comme vous pouvez le constater, à moins que vous ne génériez des milliers de requêtes, l’utilisation de Google Maps sur votre site ne devrait rien vous coûter.
Qu’est-ce qui a changé d’autre ? Rien, mais vous devrez maintenant faire ce qui suit si vous voulez utiliser Google Maps dans WordPress :
- Inscrivez-vous sur la console de la plateforme Google Cloud et configurez-le.
- Ajoutez vos informations de facturation, même si vous ne serez peut-être jamais facturé.
- Ajoutez la clé API à vos paramètres de code ou de plugin Google Maps.
Comment obtenir une clé API Google Maps
Vous trouverez ci-dessous les étapes à suivre pour obtenir votre clé API Google Maps.
Étape 1
Accédez à la console de la plateforme Google Cloud. Si vous n’avez pas encore de compte, créez-en un, c’est gratuit.
Étape 2
Sélectionnez ou créez un projet.
Étape 3
Configurez votre compte de facturation. Même s’ils exigent que vous mettiez une carte de crédit dans votre dossier, vous ne devriez jamais être facturé, à moins que vous ne dépassiez les limites d’utilisation élevées.
Étape 4
Il vous sera demandé de choisir un ou plusieurs produits. Cela dépend du type de carte que vous utilisez. Par exemple, si vous intégrez une carte sur votre site WordPress sans plugin (comme indiqué dans les étapes ci-dessous), vous devez choisir « Maps Embed API ».
Si vous utilisez un plugin comme Google Maps Widget (comme indiqué dans les étapes ci-dessous), vous devez choisir l’API statique de Google Maps.
Si vous utilisez un plugin ou un thème tiers, ils doivent avoir de la documentation sur le type de déploiement de Google Maps qu’ils utilisent. Ne vous inquiétez pas, vous pouvez toujours ajouter plusieurs types et les changer plus tard.
Étape 5
Cliquez sur « Activer ».
Étape 6
Cliquez sur « APIs » puis sous « Credentials », vous verrez votre clé API.
Étape 7
Si vous intégrez simplement votre clé API Google Maps, elle apparaîtra en texte clair dans votre code source. Par conséquent, vous devriez restreindre cela, sinon, les gens pourraient utiliser votre clé API sur leur site WordPress ou des projets et faire augmenter votre utilisation.
Pour ce faire, cliquez simplement sur le nom de votre clé API et vous pourrez ajouter une restriction. Pour votre site WordPress, le simple ajout d’un domaine HTTP devrait suffire. Comme https://votredomaine.com/*. Cela lui permettra d’effectuer uniquement des appels sur votre site Web.
Comment faire pour ajouter Google Maps dans WordPress sans un plugin
Si vous souhaitez simplement intégrer une carte simple et n’avez pas besoin de fonctionnalités plus détaillées comme des marqueurs de localisation personnalisés ou d’autres annotations, vous pouvez intégrer Google Maps sans plugin en utilisant le site Web normal de Google Maps que vous utilisez quotidiennement.
Voici comment cela fonctionne…
Étape 1 : Copier le code d’intégration de Google Maps
Pour commencer, utilisez le site Web de Google Maps pour créer la carte que vous souhaitez intégrer.
Par exemple, si vous souhaitez intégrer un marqueur de lieu, ouvrez ce lieu dans Google Maps. Ou, si vous voulez incorporer des directions, ouvrez les directions dans Google Maps.
Une fois que vous avez la carte que vous voulez intégrer, cliquez sur le menu hamburger dans le coin supérieur gauche :
Dans la liste des éléments de menu, sélectionnez l’option Partager ou Intégrer la carte :
Cela ouvrira une fenêtre contextuelle Partager, Dans cette fenêtre contextuelle, cliquez sur l’onglet Intégrer une carte.
Ensuite, vous pouvez choisir la taille désirée à l’aide du menu déroulant. Pour la plupart des sites WordPress, la taille par défaut fonctionne bien, mais vous pouvez agrandir ou réduire la carte si nécessaire.
Une fois que vous avez fait cela, cliquez sur le bouton Copier HTML pour copier le code d’intégration :
Vous devrez ensuite ajouter votre clé API dans le code. Votre code devrait donc ressembler à ceci :
YOUR_API_KEY¶meters allowfullscreen>
Étape 2 : Ajouter le code d’intégration de Google Maps au site WordPress
Maintenant, tout ce que vous avez à faire est d’ajouter ce code d’intégration à votre site WordPress dans l’article ou la page où vous voulez inclure votre carte.
Si vous utilisez le nouvel éditeur de blocs WordPress Gutenberg qui a été publié avec WordPress 5.0, vous pouvez le faire en ajoutant un bloc HTML personnalisé et en collant le code d’intégration dans le bloc. N’oubliez pas d’ajouter votre clé API.
Vous pouvez prévisualiser l’apparence de votre carte en cliquant sur le bouton Prévisualisation au-dessus du bloc.
Si vous utilisez toujours l’éditeur TinyMCE classique, vous pouvez ajouter le code d’intégration de Google Maps en ouvrant l’onglet Texte et en y collant le code :
Une fois le code ajouté, vous pouvez retourner à l’onglet Visuel pour voir un aperçu en direct de votre carte.
Et c’est tout ! Vous venez d’apprendre comment ajouter Google Maps dans WordPress sans plugin.
Utiliser Google My Maps pour intégrer des cartes plus compliquées sans plugin
Si vous voulez être plus créatif quand il s’agit de choses comme les marqueurs de localisation multiples, les annotations personnalisées, etc., vous pouvez toujours le faire sans avoir besoin d’un plugin avec le service My Maps de Google.
My Maps est un outil officiel de Google qui vous permet de créer et de partager vos propres cartes personnalisées. Avec lui, vous pourriez créer quelque chose comme l’exemple ci-dessous, avec beaucoup de marqueurs personnalisés et d’informations personnalisées qui s’affichent lorsqu’un utilisateur clique sur un marqueur :
Voici comment l’utiliser pour ajouter des Google Maps personnalisés à WordPress.
Étape 1 : Créer votre carte dans Google My Maps
Pour commencer, rendez-vous sur Google My Maps et créez une nouvelle carte. De là, vous pouvez utiliser l’interface du constructeur de carte pour construire votre carte :
Bien que nous n’en parlerons pas en détail, cette interface vous permet de créer des cartes assez créatives. Pour un examen plus approfondi, cet article d’aide de Google couvre une grande partie des fonctionnalités importantes.
Étape 2 : Générer le code d’intégration
Une fois que vous avez fini de construire votre carte, vous devez générer le code d’intégration.
Avant de pouvoir obtenir ce code, vous devez d’abord rendre votre carte publique. Pour ce faire, cliquez sur le bouton Partager. Ensuite, cliquez sur Modifier… dans la fenêtre contextuelle :
Ensuite, sélectionnez On – Public on the Web et cliquez sur Save :
Une fois que vous avez fait cela, cliquez sur le menu déroulant près du titre de votre carte et sélectionnez Intégrer sur mon site pour générer le code d’intégration :
Une fois que vous avez fait cela, cliquez sur le menu déroulant près du titre de votre carte et sélectionnez Intégrer sur mon site pour générer le code d’intégration :
Étape 3 : Ajouter le code d’intégration au site WordPress
Maintenant, vous pouvez ajouter ce code d’intégration à votre site WordPress tout comme vous le feriez avec le code d’intégration que vous obtenez sur le site Google Maps normal.
Si vous n’êtes pas sûr de savoir comment faire, cliquez ici pour accéder à la section du tutoriel ci-dessus.
Utiliser plutôt un plugin WordPress Google Maps
Au-delà des méthodes manuelles ci-dessus, il existe également des tonnes de plugins WordPress Google Maps qui peuvent vous aider à intégrer des cartes sur votre site.
Il y a quelques raisons pour lesquelles vous devrez peut-être considérer l’un de ces plugins plutôt que les méthodes manuelles :
- Ils vous permettent de créer des cartes plus complexes avec une interface simple.
- Vous pouvez tout faire sans avoir à quitter votre tableau de bord WordPress.
- Certains d’entre eux sont liés à WordPress. Par exemple, vous pourriez être en mesure de lier des marqueurs de carte aux articles WordPress.
- Certains d’entre eux peuvent vous aider à optimiser les performances de Google Maps (nous y reviendrons plus loin).
Pour tous ces plugins, vous devrez générer votre propre clé API Google Maps avant de pouvoir commencer à intégrer des cartes. Ce tutoriel vous montre comment faire.
Google Maps Widget
Google Maps Widget est un simple plugin Google Maps qui vous permet d’intégrer une carte à l’aide de l’API Google Maps Static, qui offre une approche plus performante en intégrant une image statique plutôt qu’une carte interactive (nous en parlerons dans la section suivante).
C’est une excellente option si vous voulez quelque chose de simple et léger. Une fois que vous l’aurez activé, vous devrez récupérer votre clé API Google Maps et la brancher dans les paramètres du plugin. Vous pouvez ajouter une carte Google Map à n’importe quel widget de votre site. Ensuite, les visiteurs peuvent ouvrir une version interactive plus grande de la carte :
Vous pouvez également utiliser une carte interactive immédiatement si vous le souhaitez, et la version Pro vous permet d’intégrer des cartes n’importe où sur votre site avec un shortcode.
Google Maps Easy
Google Maps Easy vous aide à créer des cartes personnalisées avec vos propres marqueurs et annotations.
Lorsque vous ajoutez des marqueurs, vous avez la possibilité de télécharger vos propres icônes personnalisées, d’inclure du texte et des images dans la description du marqueur, et bien plus encore. Vous pouvez également contrôler le fonctionnement de votre carte, par exemple en choisissant de laisser les utilisateurs zoomer ou non :
Une fois que vous avez construit votre carte, vous pouvez l’intégrer en utilisant soit un shortcode, soit une fonction PHP.
Intergeo
Intergeo est une autre option populaire qui vous permet de créer vos propres cartes avec des marqueurs personnalisés et d’avoir le contrôle sur les fonctionnalités de la carte.
Une fois que vous aurez installé et activé le plugin, vous pourrez construire vos cartes directement à partir de votre tableau de bord WordPress :
Ensuite, vous pouvez les intégrer n’importe où sur votre site en utilisant un shortcode.
Gutenberg Block For Google Maps Embed
Gutenberg Block For Google Maps Embed est un plugin simple qui ajoute un bloc Google Maps dédié au nouvel éditeur de blocs WordPress Gutenberg.
Avec ce bloc, vous pouvez intégrer n’importe quelle adresse et aussi choisir :
- Les dimensions
- Le niveau de zoom
- Carte interactive vs carte statique (encore une fois, cette dernière méthode aide au niveau des performances>)
Il ne vous permettra pas de créer vos propres cartes personnalisées – mais c’est une option pratique si vous utilisez le nouvel éditeur de blocs et que vous voulez simplement un moyen facile d’inclure des cartes simples.
Google Maps peut ralentir votre site WordPress – Ne le laissez pas faire
Alors que Google Maps vous permet d’intégrer une tonne de fonctionnalités intéressantes à votre site grâce à ses cartes interactives, il y a un compromis de performance car il doit charger un grand nombre de scripts pour alimenter toutes ces fonctionnalités interactives.
Bref, l’intégration de cartes interactives Google Maps peut ralentir votre site.
Il y a plusieurs façons de combattre cela.
Premièrement, si vous n’avez pas besoin que les gens puissent naviguer interactivement sur votre carte sur votre site Web, une façon simple d’accélérer les choses sans aucun outil tiers est de :
- Faire une capture d’écran de la carte à utiliser sur votre site
- Lier cette capture d’écran à la carte sur le site Web de Google Maps, ou ouvrez une fenêtre contextuelle avec la carte interactive lorsque l’utilisateur clique.
De cette façon, votre site ne fait que charger une image normale – pas tous les scripts associés à Google Maps.
Au lieu de le faire manuellement, vous pouvez également utiliser le plugin gratuit AWEOS Google Maps iframe load per click. Ce plugin remplace automatiquement les cartes Google Maps intégrées par une image générique. Ensuite, si un utilisateur clique sur le bouton Charger la carte, il chargera la carte Google Maps complète intégrée :
Vous pouvez également utiliser l’API statique de Google Maps, qui renvoie une image normale sans JavaScript. Certains plugins Google Maps – dont Google Maps Widget et Gutenberg Block For Google Maps Embed – vous permettent d’utiliser l’API statique lorsque vous créez vos cartes.
Cependant, nous nous rendons compte que parfois cette approche statique ne suffit pas, et beaucoup de gens veulent intégrer l’expérience interactive de Google Maps directement.
Si c’est le cas, une autre bonne façon d’accélérer Google Maps est d’utiliser un chargement en Lazy load. Avec un chargement en Lazy load, votre site attendra que les visiteurs commencent à faire défiler la page pour charger les cartes Google Maps intégrées sous la ligne de flottaison. Cela vous permet de charger vos premières pages rapidement, tout en vous permettant d’intégrer le contenu interactif de Google Maps.
Nous avons déjà écrit sur la façon de charger des images et des vidéos en Lazy load et c’est le même principe que pour Google Maps.
Il y a quelques plugins qui vous permettront de le faire. Par exemple, le plugin a3 Lazy Load vous permet de charger en Lazy load des iframe, ce qui inclut Google Maps :
Les autres options sont :
Résumé
Si vous souhaitez simplement intégrer une carte simple sur votre site, vous pouvez ajouter Google Maps à WordPress sans plugin à l’aide de la fonction d’intégration de code intégrée. Ou, vous pouvez utiliser l’outil Google My Maps pour créer votre propre carte personnalisée et l’intégrer.
Au-delà de ces méthodes manuelles, il existe également de nombreux plugins Google Maps WordPress qui peuvent vous donner beaucoup de contrôle sans vous faire quitter votre tableau de bord WordPress.
Quelle que soit la méthode que vous choisissez, faites attention à l’impact de l’utilisation de Google Maps sur les performances. Essayez d’utiliser Google Maps uniquement en cas d’absolue nécessité et envisagez des tactiques telles que les images de remplacement ou le chargement en lazy load pour diminuer l’effet négatif sur les performances.
Avez-vous d’autres questions sur l’utilisation de Google Maps sur WordPress ? Faites-le nous savoir dans les commentaires !
Brian a une grande passion pour WordPress, l'utilise depuis plus de dix ans et développe même quelques plugins de qualité. Brian aime les blogs, les films et les randonnées. Connectez avec Brian sur Twitter.
Ah oui ! Bravo ! Je galère depuis plusieurs semaines pour trouver la solution ! Et vous me l’avez donnée sur un plateau. Article très complet, Bravo !
Article très utile, merci