Vous cherchez un moyen d’intégrer le contenu de Google Maps de WordPress sur votre site ?
Comme beaucoup de choses dans WordPress, il existe plusieurs façons différentes d’intégrer Google Maps sur votre site en fonction du type de contenu cartographique que vous souhaitez inclure.
Dans cet article, nous commencerons par vous montrer comment ajouter Google Maps dans WordPress sans plugin. Ensuite, nous recommanderons quelques plugins qui peuvent vous aider à intégrer Google Maps, ainsi que certains des avantages d’adopter cette approche. Nous plongerons également dans la façon d’utiliser correctement l’API Google Maps, qui est maintenant requise.
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 votre site WordPress se chargeant rapidement, même si vous avez besoin d’intégrer Google Maps.
Vous pouvez cliquer ci-dessous pour passer directement à une section spécifique ou simplement lire l’ensemble.
- L’API Google Maps est désormais requise
- Comment ajouter Google Maps dans WordPress sans plugin
- Des plugins Google Maps pour WordPress qui vous donnent plus de flexibilité
- Effet de performance de Google Maps et conseils pour améliorer les performances
L’API Google Maps est désormais requise
Depuis le 11 juin, 2018, une clé d’API est désormais requise pour Google Maps. Si vous avez déjà implémenté Google Maps sur votre site et qu’il ne fonctionne plus, cela pourrait en être la raison. Ou plutôt, il vous manque la clé API. La bonne nouvelle, c’est que pour 99 % d’entre vous, elle devrait encore être gratuite. Vous trouverez ci-dessous la tarification de l’API Google Maps.
tarification de l’API Google Maps
Google vous accorde également un crédit récurrent de 200 $ sur votre compte de facturation chaque mois pour compenser vos coûts d’utilisation. Donc, comme vous pouvez le constater, à moins de générer 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 :
- S’inscrire à un compte Google Cloud Platform Console et le configurer.
- Ajouter vos informations de facturation, même si vous ne serez peut-être jamais facturé.
- Ajouter la clé API à votre code d’intégration Google Maps ou aux paramètres de votre plugin.
Comment obtenir une clé API Google Maps
Vous trouverez ci-dessous les étapes à suivre pour obtenir votre clé API Google Maps.
Etape 1
Allez sur la console de la plateforme Google Cloud. Si vous n’avez pas encore de compte, créez-en un, c’est gratuit.
Etape 2
Sélectionnez ou créez un projet.
Etape 3
Configurez votre compte de facturation. Même s’ils vous demandent de mettre une carte de crédit dans le dossier, vous ne devriez jamais être facturé, à moins que vous ne dépassiez les limites d’utilisation élevées.
Étape 4
Vous serez invité à 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 plus bas), vous choisirez l’API Google Maps Embed.
Google Maps Embed API
Si vous utilisez un plugin comme Google Maps Widget (comme indiqué dans les étapes plus loin), alors vous choisirez l’API statique Google Maps.
Si vous utilisez un plugin ou un thème tiers, ils devraient avoir une 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 modifier ultérieurement.
Etape 5
Cliquez sur « Activer. »
Activer l’API Google Maps
Étape 6
Cliquez sur « APIs », puis sous « Credentials », vous verrez votre clé API.
Clé d’API Google Maps
Étape 7
Si vous intégrez simplement votre clé d’API Google Maps, elle s’affichera en 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 leurs projets et racketter votre utilisation.
Pour ce faire, il suffit de cliquer sur le nom de votre clé API et cela vous permettra d’ajouter une restriction. Pour votre site WordPress, le simple fait d’ajouter un référent HTTP devrait suffire. Par exemple, https://yourdomain.com/*. Cela lui permettra de ne faire que des appels sur votre site web.
Restriction de la clé API de Google Maps
Comment ajouter Google Maps dans WordPress sans plugin
Si vous souhaitez simplement intégrer une carte simple et que vous 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 au quotidien.
Voici comment cela fonctionne…
Etape 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 encore, si vous voulez intégrer 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 :
Comment accéder au code d’intégration
Dans la liste des éléments du menu, sélectionnez l’option pour Partager ou intégrer la carte :
Ouvrir les options d’intégration
Cela ouvrira une popup de partage. Dans cette popup, cliquez sur l’onglet Intégrer une carte.
Puis, vous pouvez choisir la taille que vous souhaitez en utilisant la liste déroulante. Pour la plupart des sites WordPress, la taille par défaut fonctionne bien, mais vous pouvez rendre la carte plus grande ou plus petite si nécessaire.
Une fois que vous avez fait cela, cliquez sur le bouton Copy HTML pour copier le code embarqué :
Le code embarqué de Google Maps
Vous devrez ensuite ajouter votre clé API dans le code. Votre code devrait donc ressembler à quelque chose comme ceci :
<iframe src="https://www.google.com/maps/embed/v1/search?key=YOUR_API_KEY¶meters allowfullscreen></iframe>
Etape 2 : ajouter le code d’intégration de Google Maps au site WordPress
Maintenant, tout ce que vous devez 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 bloc 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.
Comment ajouter le code d’intégration dans l’éditeur de blocs WordPress
Vous pouvez avoir un aperçu de l’aspect de votre carte en cliquant sur le bouton Aperçu au-dessus du bloc.
Si vous utilisez toujours l’éditeur classique TinyMCE, vous pouvez ajouter le code d’intégration de Google Maps en ouvrant l’onglet Texte et en y collant le code :
Comment ajouter le code d’intégration dans l’éditeur classique de WordPress
Une fois que vous avez ajouté le code, vous pouvez revenir à l’onglet Visuel pour voir un aperçu en direct de votre carte.
Et c’est tout ! Vous venez d’apprendre comment ajouter des cartes 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 des marqueurs de localisation multiples, des annotations personnalisées, etc…, vous pouvez encore 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 des informations personnalisées qui s’affichent lorsqu’un utilisateur clique sur un marqueur :
Google My Maps exemple
Voici comment l’utiliser pour ajouter des cartes Google Maps personnalisées à WordPress.
Sign Up For the Newsletter
Nous avons augmenté notre trafic de 1 187% avec WordPress. Nous allons vous montrer comment.
Rejoignez plus de 20 000 autres personnes qui reçoivent notre newsletter hebdomadaire avec des conseils d’initiés sur WordPress !
Étape 1 : créer votre carte dans Google Mes Cartes
Pour commencer, rendez-vous sur Google Mes Cartes et créez une nouvelle carte. De là, vous pouvez utiliser l’interface de création de carte pour construire votre carte :
L’interface Google My Maps
Bien que nous ne l’aborderons pas de manière trop détaillée, cette interface vous permet de construire des cartes assez créatives. Pour un examen plus approfondi, cet article d’aide de Google couvre une grande partie des fonctionnalités importantes.
Etape 2 : Générer le code d’intégration
Une fois que vous avez terminé de construire votre carte, vous devez générer le code d’intégration.
Avant d’obtenir ce code, cependant, 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 :
Paramètres de partage de Google My Maps
Puis, sélectionnez Activé – Public sur le Web et cliquez sur Enregistrer :
Activer le partage de liens
Une fois que vous avez fait cela, cliquez sur le menu déroulant près du titre de votre carte et sélectionnez Embed on my site pour générer le code d’intégration réel :
Accéder au code d’intégration de My Maps
Cela ouvrira une popup avec le code, que vous devez copier. N’oubliez pas d’ajouter votre clé API.
Le code d’intégration de My Maps
Étape 3 : ajouter le code d’intégration au site WordPress
Maintenant, vous pouvez ajouter ce code d’intégration à votre site WordPress comme vous le feriez avec le code d’intégration que vous obtenez sur le site Web ordinaire de Google Maps.
Si vous n’êtes pas sûr de savoir comment faire, cliquez ici pour sauter à cette section du tutoriel du dessus.
Utiliser un plugin WordPress Google Maps à la place
A part les méthodes manuelles ci-dessus, il existe également des plugins WordPress Google Maps qui peuvent vous aider à intégrer des cartes sur votre site.
Il y a quelques raisons pour lesquelles vous pourriez envisager l’un de ces plugins plutôt que les méthodes manuelles :
- Ils vous permettent de créer des cartes plus compliquées 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 à des articles WordPress.
- Certains d’entre eux peuvent vous aider à optimiser les performances de Google Maps (nous y reviendrons plus tard).
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 le faire.
Google Maps Widget
Google Maps Widget est un plugin Google Maps simple qui vous permet d’intégrer une carte en utilisant l’API Google Maps Static, qui offre une approche plus respectueuse des performances en intégrant une image statique plutôt qu’une carte interactive (nous vous expliquerons plus en détail dans la section suivante).
C’est une excellente option si vous voulez quelque chose de simple et de léger. Une fois que vous l’aurez activé, vous devrez saisir votre clé API Google Maps et la brancher dans les paramètres du plugin. Vous pouvez ajouter une carte Google Maps à n’importe quelle zone de widgets sur votre site. Ensuite, les visiteurs peuvent ouvrir une version interactive plus grande de la carte dans une lightbox :
L’interface du widget Google Maps
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, comme choisir de laisser ou non les utilisateurs effectuer un zoom avant :
Interface Google Maps Easy
Une fois que vous avez construit votre carte, vous pouvez l’intégrer à l’aide d’un shortcode ou d’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 de contrôler les fonctionnalités de la carte.
Une fois que vous aurez installé et activé le plugin, vous serez en mesure de construire vos cartes directement à partir de votre tableau de bord WordPress :
Intergeo interface
Puis, vous pouvez les intégrer n’importe où sur votre site en utilisant un shortcode.
Le bloc Gutenberg pour Google Maps Embed
Le bloc Gutenberg pour Google Maps Embed est un plugin simple qui ajoute un bloc Google Maps dédié au nouvel éditeur de blocs Gutenberg de WordPress.
Avec ce bloc, vous pouvez intégrer n’importe quelle adresse et aussi choisir :
- Dimensions
- Niveau de zoom
- Carte interactive vs carte statique (encore une fois, cette dernière méthode aide aux 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 juste un moyen facile d’inclure quelques cartes simples.
Google Maps peut ralentir votre site WordPress – Ne le laissez pas faire
Bien que Google Maps vous permette d’intégrer une tonne de fonctionnalités intéressantes à votre site grâce à ses cartes interactives, il y a un compromis au niveau des performances car il doit charger un grand nombre de scripts pour alimenter toutes ces fonctionnalités interactives.
Pour faire court, l’intégration de Google Maps interactifs peut ralentir votre site.
Il existe quelques moyens de lutter contre cela.
Premièrement, si vous n’avez pas besoin que les gens puissent parcourir interactivement votre carte sur votre site Web, un moyen simple d’accélérer les choses sans outils tiers est de :
- Prendre 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 ouvrir une popup lightbox avec la carte interactive lorsqu’un utilisateur clique.
De cette façon, votre site ne fait que charger une image ordinaire – et non 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 embeds Google Maps par une image générique de type placeholder. Ensuite, si un utilisateur clique sur le bouton Charger la carte, il chargera l’intégration complète de Google Maps :
Image générique de Google Maps
Ou, vous pouvez également utiliser l’API statique de Google Maps, qui renvoie une image ordinaire sans aucun JavaScript. Certains plugins Google Maps – notamment 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 sommes conscients que parfois, cette approche statique ne suffit pas et que beaucoup de gens veulent intégrer l’expérience interactive de Google Maps immédiatement.
Si c’est le cas, un autre bon moyen d’accélérer Google Maps est d’utiliser le chargement paresseux. Avec le chargement paresseux, votre site attendra pour charger tout embed de Google Maps sous le pli jusqu’à ce que les visiteurs commencent à faire défiler la page vers le bas. Cela permet de conserver des temps de chargement de page initiaux rapides, tout en vous permettant d’intégrer du contenu Google Maps interactif.
Nous avons déjà écrit sur la façon de charger paresseusement les images et les vidéos et c’est la même idée pour Google Maps.
Il existe quelques plugins qui vous permettront de le faire. Par exemple, le plugin a3 Lazy Load vous permet de charger paresseusement les embeds iframe, ce qui inclut Google Maps :
Lazy load Google Maps
L’autre option est :
- BJ Lazy Load
- Lazy Load by WP Rocket
- Easy Lazy Loader
Summary
Si vous souhaitez simplement intégrer une carte simple sur votre site, vous pouvez ajouter Google Maps à WordPress sans plugin en utilisant la fonctionnalité intégrée de code d’intégration. Ou bien, vous pouvez utiliser l’outil Google My Maps pour créer votre propre carte personnalisée et l’intégrer.
A part 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.
Quoi que vous choisissiez comme méthode, faites attention à l’impact sur les performances de l’utilisation de Google Maps. Essayez de n’utiliser Google Maps qu’en cas d’absolue nécessité et envisagez des tactiques comme les images placeholder ou le chargement paresseux 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 !
Si vous avez apprécié cet article, alors vous allez adorer la plateforme d’hébergement WordPress de Kinsta. Turbochargez votre site Web et obtenez un soutien 24/7 de notre équipe WordPress vétéran. Notre infrastructure alimentée par Google Cloud se concentre sur l’auto-scaling, les performances et la sécurité. Laissez-nous vous montrer la différence Kinsta ! Consultez nos plans
.