{"id":320,"date":"2020-10-07T14:49:45","date_gmt":"2020-10-07T14:49:45","guid":{"rendered":"https:\/\/cinnk.com\/index.php\/2020\/10\/07\/comment-integrer-des-cartes-responsive-design-dans-votre-site-web\/"},"modified":"2020-10-07T14:49:45","modified_gmt":"2020-10-07T14:49:45","slug":"comment-integrer-des-cartes-responsive-design-dans-votre-site-web","status":"publish","type":"post","link":"https:\/\/cinnk.com\/fr\/comment-integrer-des-cartes-responsive-design-dans-votre-site-web\/","title":{"rendered":"Comment int\u00e9grer des cartes responsive design dans votre site web"},"content":{"rendered":"

Dans cet article, nous voyons comment<\/strong> int\u00e9grer<\/strong> dans votre site des cartes Google Maps<\/strong> en responsive design<\/strong>.<\/p>\n


\nComment int\u00e9grer des cartes responsive design dans votre site web Voici comment int\u00e9grer dans votre site des cartes Google Maps en responsive design. Google Maps vous permet de facilement int\u00e9grer des cartes dans votre site web. Cependant, par d\u00e9faut, ces cartes ne sont pas responsive design.
\nDans ce tutoriel, je vais vous montrer comment rendre vos cartes responsive, en utilisant simplement quelques lignes de CSS. Cette technique fonctionnera avec Joomla!, WordPress, Drupal ou n’importe quelle platform.
\nObtenir le code d’int\u00e9gration de Google Maps<\/p>\n

Rendez-vous sur Google Maps.
\nRecherchez la carte que vous souhaitez int\u00e9grer sur votre site web.
\nCliquer sur le lien \u00ab\u00a0Partager ou int\u00e9grer la carte\u00a0\u00bb :<\/p>\n

Partage carte Googla Maps <\/p>\n

Int\u00e9gration carte Google Map <\/p>\n

Choisissez \u00ab\u00a0Int\u00e9grer la carte\u00a0\u00bb
\nS\u00e9lectionnez et copier le code iframe<\/p>\n

Utiliser le code Int\u00e9grer
\nColler le code sur votre site \u00e0 l’endroit o\u00f9 vous souhaitez afficher la carte. Ce code doit ressembler \u00e0 cela :<\/p>\n

Modifier le code Int\u00e9grer
\nAjouter une balise div autour du code Int\u00e9grer la carte. Utiliser la class CSS carte-responsive afin que votre code ressemble d\u00e9sormais \u00e0 cela :<\/p>\n

 
\nAjouter le CSS
\nAjoutez maintenant les propri\u00e9t\u00e9s CSS suivante dans la feuille de style de votre site :<\/p>\n

.carte-responsive{
\n overflow:hidden;
\n padding-bottom:56.25%;
\n position:relative;
\n height:0;
\n}
\n.carte-responsive iframe{
\n left:0;
\n top:0;
\n height:100%;
\n width:100%;
\n position:absolute;
\n}<\/p>\n

Votre carte est d\u00e9sormais responsive. Vous pouvez modifier la taille de votre navigateur ou afficher votre site depuis votre smartphone pour tester.
\n 
\nAttention : l’\u00e9diteur JCE n’accepte pas, par d\u00e9faut, les balise Iframe. Si vous utilisez cet \u00e9diteur, vous devrez param\u00e9trer JCE pour autoriser les Iframe.
\n{loadposition pub-100-trucs-astuces}
\nNote : cet article est une traduction de : Create Responsive Google Maps on Any Website Cr\u00e9dits photo
\nImage by Free-Photos from Pixabay<\/p>\n","protected":false},"excerpt":{"rendered":"

Dans cet article, nous voyons comment int\u00e9grer dans votre site des cartes Google Maps en responsive design.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[11],"tags":[],"class_list":["post-320","post","type-post","status-publish","format-standard","hentry","category-sixtine"],"yoast_head":"\nComment int\u00e9grer des cartes responsive design dans votre site web | Cinnk<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cinnk.com\/fr\/comment-integrer-des-cartes-responsive-design-dans-votre-site-web\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Comment int\u00e9grer des cartes responsive design dans votre site web | Cinnk\" \/>\n<meta property=\"og:description\" content=\"Dans cet article, nous voyons comment int\u00e9grer dans votre site des cartes Google Maps en responsive design.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cinnk.com\/fr\/comment-integrer-des-cartes-responsive-design-dans-votre-site-web\/\" \/>\n<meta property=\"og:site_name\" content=\"Cinnk\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Cinnk.formation\" \/>\n<meta property=\"article:published_time\" content=\"2020-10-07T14:49:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cinnk.com\/wp-content\/uploads\/2024\/10\/Logo-font.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"500\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Cinnk\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CinnkCom\" \/>\n<meta name=\"twitter:site\" content=\"@CinnkCom\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Cinnk\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/cinnk.com\/fr\/comment-integrer-des-cartes-responsive-design-dans-votre-site-web\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cinnk.com\/fr\/comment-integrer-des-cartes-responsive-design-dans-votre-site-web\/\"},\"author\":{\"name\":\"Cinnk\",\"@id\":\"https:\/\/cinnk.com\/fr\/#\/schema\/person\/eacaed860bb77e88b654cab0718cdc3d\"},\"headline\":\"Comment int\u00e9grer des cartes responsive design dans votre site web\",\"datePublished\":\"2020-10-07T14:49:45+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cinnk.com\/fr\/comment-integrer-des-cartes-responsive-design-dans-votre-site-web\/\"},\"wordCount\":331,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/cinnk.com\/fr\/#organization\"},\"articleSection\":[\"sixtine\"],\"inLanguage\":\"fr-FR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cinnk.com\/fr\/comment-integrer-des-cartes-responsive-design-dans-votre-site-web\/\",\"url\":\"https:\/\/cinnk.com\/fr\/comment-integrer-des-cartes-responsive-design-dans-votre-site-web\/\",\"name\":\"Comment int\u00e9grer des cartes responsive design dans votre site web | Cinnk\",\"isPartOf\":{\"@id\":\"https:\/\/cinnk.com\/fr\/#website\"},\"datePublished\":\"2020-10-07T14:49:45+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/cinnk.com\/fr\/comment-integrer-des-cartes-responsive-design-dans-votre-site-web\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cinnk.com\/fr\/comment-integrer-des-cartes-responsive-design-dans-votre-site-web\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cinnk.com\/fr\/comment-integrer-des-cartes-responsive-design-dans-votre-site-web\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\/\/cinnk.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Comment int\u00e9grer des cartes responsive design dans votre site web\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cinnk.com\/fr\/#website\",\"url\":\"https:\/\/cinnk.com\/fr\/\",\"name\":\"Cinnk\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cinnk.com\/fr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cinnk.com\/fr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cinnk.com\/fr\/#organization\",\"name\":\"Cinnk\",\"url\":\"https:\/\/cinnk.com\/fr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/cinnk.com\/fr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cinnk.com\/wp-content\/uploads\/2023\/10\/logo-svg-orange_new.svg\",\"contentUrl\":\"https:\/\/cinnk.com\/wp-content\/uploads\/2023\/10\/logo-svg-orange_new.svg\",\"width\":125,\"height\":32,\"caption\":\"Cinnk\"},\"image\":{\"@id\":\"https:\/\/cinnk.com\/fr\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Cinnk.formation\",\"https:\/\/x.com\/CinnkCom\",\"https:\/\/www.instagram.com\/cinnk\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/cinnk.com\/fr\/#\/schema\/person\/eacaed860bb77e88b654cab0718cdc3d\",\"name\":\"Cinnk\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/cinnk.com\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2110805a2e278c633c677ec50fd5a9944d8f66b4fac05f86ebb21a2f87be8e0b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/2110805a2e278c633c677ec50fd5a9944d8f66b4fac05f86ebb21a2f87be8e0b?s=96&d=mm&r=g\",\"caption\":\"Cinnk\"},\"sameAs\":[\"https:\/\/cinnk.com\"],\"url\":\"https:\/\/cinnk.com\/fr\/author\/cinnkdev\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Comment int\u00e9grer des cartes responsive design dans votre site web | Cinnk","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cinnk.com\/fr\/comment-integrer-des-cartes-responsive-design-dans-votre-site-web\/","og_locale":"fr_FR","og_type":"article","og_title":"Comment int\u00e9grer des cartes responsive design dans votre site web | Cinnk","og_description":"Dans cet article, nous voyons comment int\u00e9grer dans votre site des cartes Google Maps en responsive design.","og_url":"https:\/\/cinnk.com\/fr\/comment-integrer-des-cartes-responsive-design-dans-votre-site-web\/","og_site_name":"Cinnk","article_publisher":"https:\/\/www.facebook.com\/Cinnk.formation","article_published_time":"2020-10-07T14:49:45+00:00","og_image":[{"width":500,"height":500,"url":"https:\/\/cinnk.com\/wp-content\/uploads\/2024\/10\/Logo-font.jpg","type":"image\/jpeg"}],"author":"Cinnk","twitter_card":"summary_large_image","twitter_creator":"@CinnkCom","twitter_site":"@CinnkCom","twitter_misc":{"\u00c9crit par":"Cinnk","Dur\u00e9e de lecture estim\u00e9e":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/cinnk.com\/fr\/comment-integrer-des-cartes-responsive-design-dans-votre-site-web\/#article","isPartOf":{"@id":"https:\/\/cinnk.com\/fr\/comment-integrer-des-cartes-responsive-design-dans-votre-site-web\/"},"author":{"name":"Cinnk","@id":"https:\/\/cinnk.com\/fr\/#\/schema\/person\/eacaed860bb77e88b654cab0718cdc3d"},"headline":"Comment int\u00e9grer des cartes responsive design dans votre site web","datePublished":"2020-10-07T14:49:45+00:00","mainEntityOfPage":{"@id":"https:\/\/cinnk.com\/fr\/comment-integrer-des-cartes-responsive-design-dans-votre-site-web\/"},"wordCount":331,"commentCount":0,"publisher":{"@id":"https:\/\/cinnk.com\/fr\/#organization"},"articleSection":["sixtine"],"inLanguage":"fr-FR"},{"@type":"WebPage","@id":"https:\/\/cinnk.com\/fr\/comment-integrer-des-cartes-responsive-design-dans-votre-site-web\/","url":"https:\/\/cinnk.com\/fr\/comment-integrer-des-cartes-responsive-design-dans-votre-site-web\/","name":"Comment int\u00e9grer des cartes responsive design dans votre site web | Cinnk","isPartOf":{"@id":"https:\/\/cinnk.com\/fr\/#website"},"datePublished":"2020-10-07T14:49:45+00:00","breadcrumb":{"@id":"https:\/\/cinnk.com\/fr\/comment-integrer-des-cartes-responsive-design-dans-votre-site-web\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cinnk.com\/fr\/comment-integrer-des-cartes-responsive-design-dans-votre-site-web\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/cinnk.com\/fr\/comment-integrer-des-cartes-responsive-design-dans-votre-site-web\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/cinnk.com\/fr\/"},{"@type":"ListItem","position":2,"name":"Comment int\u00e9grer des cartes responsive design dans votre site web"}]},{"@type":"WebSite","@id":"https:\/\/cinnk.com\/fr\/#website","url":"https:\/\/cinnk.com\/fr\/","name":"Cinnk","description":"","publisher":{"@id":"https:\/\/cinnk.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cinnk.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/cinnk.com\/fr\/#organization","name":"Cinnk","url":"https:\/\/cinnk.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/cinnk.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/cinnk.com\/wp-content\/uploads\/2023\/10\/logo-svg-orange_new.svg","contentUrl":"https:\/\/cinnk.com\/wp-content\/uploads\/2023\/10\/logo-svg-orange_new.svg","width":125,"height":32,"caption":"Cinnk"},"image":{"@id":"https:\/\/cinnk.com\/fr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Cinnk.formation","https:\/\/x.com\/CinnkCom","https:\/\/www.instagram.com\/cinnk"]},{"@type":"Person","@id":"https:\/\/cinnk.com\/fr\/#\/schema\/person\/eacaed860bb77e88b654cab0718cdc3d","name":"Cinnk","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/cinnk.com\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/2110805a2e278c633c677ec50fd5a9944d8f66b4fac05f86ebb21a2f87be8e0b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2110805a2e278c633c677ec50fd5a9944d8f66b4fac05f86ebb21a2f87be8e0b?s=96&d=mm&r=g","caption":"Cinnk"},"sameAs":["https:\/\/cinnk.com"],"url":"https:\/\/cinnk.com\/fr\/author\/cinnkdev\/"}]}},"_links":{"self":[{"href":"https:\/\/cinnk.com\/fr\/wp-json\/wp\/v2\/posts\/320","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cinnk.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cinnk.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cinnk.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cinnk.com\/fr\/wp-json\/wp\/v2\/comments?post=320"}],"version-history":[{"count":0,"href":"https:\/\/cinnk.com\/fr\/wp-json\/wp\/v2\/posts\/320\/revisions"}],"wp:attachment":[{"href":"https:\/\/cinnk.com\/fr\/wp-json\/wp\/v2\/media?parent=320"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cinnk.com\/fr\/wp-json\/wp\/v2\/categories?post=320"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cinnk.com\/fr\/wp-json\/wp\/v2\/tags?post=320"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}