{"id":1787,"date":"2026-06-11T16:10:36","date_gmt":"2026-06-11T14:10:36","guid":{"rendered":"https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/?page_id=1787"},"modified":"2026-06-11T18:51:37","modified_gmt":"2026-06-11T16:51:37","slug":"integrer-une-carte-google-maps-sur-wordpress","status":"publish","type":"page","link":"https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/?page_id=1787","title":{"rendered":"Int\u00e9grer une carte Google Maps sur WordPress"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"543\" src=\"https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-11-juin-2026-18_32_50-1024x543.png\" alt=\"\" class=\"wp-image-1819\" srcset=\"https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-11-juin-2026-18_32_50-1024x543.png 1024w, https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-11-juin-2026-18_32_50-300x159.png 300w, https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-11-juin-2026-18_32_50-768x407.png 768w, https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-11-juin-2026-18_32_50-1536x814.png 1536w, https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-11-juin-2026-18_32_50-850x450.png 850w, https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-11-juin-2026-18_32_50.png 1723w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\">Pr\u00e9sentation<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Lors de la cr\u00e9ation d&rsquo;un site web, il peut \u00eatre utile d&rsquo;indiquer l&#8217;emplacement d&rsquo;une association, d&rsquo;une entreprise, d&rsquo;un \u00e9v\u00e9nement ou d&rsquo;un \u00e9tablissement comme l&rsquo;on fait plusieurs \u00e9tudiants. L&rsquo;int\u00e9gration d&rsquo;une carte Google Maps permet aux visiteurs de localiser rapidement un lieu sans avoir \u00e0 quitter le site.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Cette solution pr\u00e9sente plusieurs avantages : elle est simple \u00e0 mettre en place, ne n\u00e9cessite aucune comp\u00e9tence en programmation et ne requiert pas l&rsquo;installation d&rsquo;une extension suppl\u00e9mentaire. Il suffit de r\u00e9cup\u00e9rer le code d&rsquo;int\u00e9gration propos\u00e9 par Google Maps puis de l&rsquo;ins\u00e9rer dans WordPress gr\u00e2ce \u00e0 un bloc HTML personnalis\u00e9. <\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Comment Int\u00e9grer une Carte Google Maps sur WordPress facilement ?\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/0Tu749Otmhk?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\"><strong>Premi\u00e8re \u00e9tape : G\u00e9n\u00e9rer le code de la carte<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">La premi\u00e8re \u00e9tape consiste \u00e0 rechercher l&rsquo;adresse ou le lieu que l&rsquo;on souhaite afficher sur Google Maps. Une fois le lieu trouv\u00e9, Google propose une option permettant de g\u00e9n\u00e9rer automatiquement un code d&rsquo;int\u00e9gration.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ce code constitue en quelque sorte un lien entre Google Maps et WordPress. Il permet d&rsquo;afficher une carte interactive directement sur une page du site tout en conservant les fonctionnalit\u00e9s de navigation, de zoom et de calcul d&rsquo;itin\u00e9raire propos\u00e9es par Google Maps.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Conseil<\/strong> <strong>d&rsquo;amis<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Avant de copier le code, il est possible de choisir la taille de la carte afin d&rsquo;obtenir un affichage plus adapt\u00e9 \u00e0 la mise en page du site.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\">Deuxi\u00e8me \u00e9tape : Copier le code d&rsquo;int\u00e9gration<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"564\" src=\"https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-11-juin-2026-18_35_52-1024x564.png\" alt=\"\" class=\"wp-image-1822\" srcset=\"https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-11-juin-2026-18_35_52-1024x564.png 1024w, https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-11-juin-2026-18_35_52-300x165.png 300w, https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-11-juin-2026-18_35_52-768x423.png 768w, https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-11-juin-2026-18_35_52-1536x846.png 1536w, https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-11-juin-2026-18_35_52-850x468.png 850w, https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-11-juin-2026-18_35_52.png 1690w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-pale-cyan-blue-color\">Code d&rsquo;int\u00e9gration<\/mark><\/em><\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Google Maps fournit un code HTML appel\u00e9 <em>iframe<\/em>. Celui-ci contient toutes les informations n\u00e9cessaires pour afficher la carte sur le site.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Il est important de copier l&rsquo;int\u00e9gralit\u00e9 du code afin d&rsquo;\u00e9viter tout probl\u00e8me d&rsquo;affichage. Cette m\u00e9thode est particuli\u00e8rement int\u00e9ressante pour les d\u00e9butants car elle \u00e9vite toute manipulation complexe et ne n\u00e9cessite aucune configuration suppl\u00e9mentaire.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\">Troisi\u00e8me \u00e9tape : Ajouter la carte dans WordPress<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"585\" src=\"https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-11-juin-2026-12_17_41-1024x585.png\" alt=\"\" class=\"wp-image-1793\" srcset=\"https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-11-juin-2026-12_17_41-1024x585.png 1024w, https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-11-juin-2026-12_17_41-300x171.png 300w, https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-11-juin-2026-12_17_41-768x439.png 768w, https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-11-juin-2026-12_17_41-1536x877.png 1536w, https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-11-juin-2026-12_17_41-850x485.png 850w, https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-11-juin-2026-12_17_41.png 1660w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-pale-cyan-blue-color\">Bloc HTML personnalis\u00e9 dans WordPress<\/mark><\/em><\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Une fois le code r\u00e9cup\u00e9r\u00e9, il peut \u00eatre int\u00e9gr\u00e9 directement dans une page WordPress \u00e0 l&rsquo;aide d&rsquo;un bloc <strong>HTML personnalis\u00e9<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Cette solution permet de conserver un site l\u00e9ger puisqu&rsquo;aucune extension n&rsquo;est install\u00e9e. Elle offre \u00e9galement une grande libert\u00e9 concernant l&#8217;emplacement de la carte, qui peut \u00eatre ajout\u00e9e sur une page Contact, une page Informations pratiques ou m\u00eame sur la page d&rsquo;accueil lorsque la localisation repr\u00e9sente une information essentielle. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\">Quatri\u00e8me \u00e9tape : V\u00e9rifier le rendu final<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"683\" src=\"https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-11-juin-2026-12_22_00-1024x683.png\" alt=\"\" class=\"wp-image-1794\" srcset=\"https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-11-juin-2026-12_22_00-1024x683.png 1024w, https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-11-juin-2026-12_22_00-300x200.png 300w, https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-11-juin-2026-12_22_00-768x512.png 768w, https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-11-juin-2026-12_22_00-850x567.png 850w, https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-11-juin-2026-12_22_00.png 1536w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-pale-cyan-blue-color\">Bloc HTML personnalis\u00e9 dans WordPres<\/mark><\/em><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-pale-cyan-blue-color\">s<\/mark><\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Une fois la page enregistr\u00e9e, il est important de v\u00e9rifier le rendu final de la carte. Cette \u00e9tape permet de s&rsquo;assurer que celle-ci s&rsquo;affiche correctement et reste facile \u00e0 consulter, aussi bien sur ordinateur que sur smartphone.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Prendre quelques instants pour tester l&rsquo;affichage peut \u00e9viter certains probl\u00e8mes de mise en page. Une carte trop petite risque de compliquer la navigation des visiteurs, tandis qu&rsquo;une carte trop grande peut prendre une place excessive et d\u00e9s\u00e9quilibrer le contenu de la page.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Si n\u00e9cessaire, il est donc recommand\u00e9 d&rsquo;ajuster ses dimensions afin d&rsquo;obtenir un affichage harmonieux et une exp\u00e9rience de navigation plus agr\u00e9able pour les utilisateurs.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\"><strong>Bonnes pratiques<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">L&rsquo;int\u00e9gration d&rsquo;une carte Google Maps est relativement simple, mais quelques bonnes pratiques permettent d&rsquo;offrir une meilleure exp\u00e9rience aux visiteurs du site.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Dans la plupart des cas, il est recommand\u00e9 d&rsquo;ajouter la carte sur une page <strong>\u00ab <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-pale-cyan-blue-color\">Contact<\/mark> \u00bb<\/strong> ou <strong>\u00ab<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-pale-cyan-blue-color\"> Informations pratiques <\/mark>\u00bb<\/strong>, o\u00f9 les utilisateurs s&rsquo;attendent naturellement \u00e0 trouver les informations de localisation. Cela facilite la navigation et \u00e9vite de surcharger les autres pages du site.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Pour apporter davantage de clart\u00e9, il peut \u00e9galement \u00eatre utile d&rsquo;afficher l&rsquo;<strong>adresse compl\u00e8te<\/strong> \u00e0 proximit\u00e9 de la carte. Certains visiteurs pr\u00e9f\u00e8rent consulter directement les coordonn\u00e9es sans avoir \u00e0 interagir avec la carte, notamment lorsqu&rsquo;ils souhaitent copier une adresse ou la saisir dans leur propre application de navigation.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Il est \u00e9galement important de v\u00e9rifier le rendu sur diff\u00e9rents supports. Une carte qui s&rsquo;affiche correctement sur ordinateur peut parfois \u00eatre moins adapt\u00e9e \u00e0 une consultation sur smartphone ou tablette. Tester l&rsquo;affichage sur plusieurs appareils permet donc de garantir une exp\u00e9rience de navigation optimale.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Enfin, il est pr\u00e9f\u00e9rable d&rsquo;\u00e9viter de multiplier les cartes sur un m\u00eame site. Une seule carte bien positionn\u00e9e est g\u00e9n\u00e9ralement suffisante pour transmettre l&rsquo;information recherch\u00e9e. Un nombre trop important de cartes peut alourdir la page et nuire \u00e0 sa lisibilit\u00e9.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"581\" src=\"https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-11-juin-2026-18_35_02-1024x581.png\" alt=\"\" class=\"wp-image-1821\" srcset=\"https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-11-juin-2026-18_35_02-1024x581.png 1024w, https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-11-juin-2026-18_35_02-300x170.png 300w, https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-11-juin-2026-18_35_02-768x436.png 768w, https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-11-juin-2026-18_35_02-1536x872.png 1536w, https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-11-juin-2026-18_35_02-850x482.png 850w, https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-11-juin-2026-18_35_02.png 1665w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Pr\u00e9sentation Lors de la cr\u00e9ation d&rsquo;un site web, il peut \u00eatre utile d&rsquo;indiquer l&#8217;emplacement d&rsquo;une association, d&rsquo;une entreprise, d&rsquo;un \u00e9v\u00e9nement ou d&rsquo;un \u00e9tablissement comme l&rsquo;on fait plusieurs \u00e9tudiants. L&rsquo;int\u00e9gration d&rsquo;une carte Google Maps permet aux visiteurs de localiser rapidement un lieu sans avoir \u00e0 quitter le site. Cette solution pr\u00e9sente plusieurs avantages : elle est&#8230;<\/p>\n","protected":false},"author":4,"featured_media":1817,"parent":162,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1787","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/index.php?rest_route=\/wp\/v2\/pages\/1787","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/index.php?rest_route=\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1787"}],"version-history":[{"count":4,"href":"https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/index.php?rest_route=\/wp\/v2\/pages\/1787\/revisions"}],"predecessor-version":[{"id":1825,"href":"https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/index.php?rest_route=\/wp\/v2\/pages\/1787\/revisions\/1825"}],"up":[{"embeddable":true,"href":"https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/index.php?rest_route=\/wp\/v2\/pages\/162"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/index.php?rest_route=\/wp\/v2\/media\/1817"}],"wp:attachment":[{"href":"https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1787"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}