Si vous êtes à la recherche d’une solution facile et qui répond pleinement aux codes pour intégrer Google Maps ou Bing sur votre site Web, vous pouvez essayer cette technique CSS.

Apparemment, beaucoup de développeurs se battent pour intégrer Google Maps ou Bing dans les conceptions Responsive Design. En ce qui me concerne, vous pouvez résoudre ce avec une technique CSS très facile.
CSS
Assurez-vous d’inclure le code CSS suivant sur votre site web :

.Flexible-container {
    position: relative;
    padding-top: 30px;
    height: 100%;
    overflow: hidden;
}

.Flexible-container iframe,   
.Flexible-container object,  
.Flexible-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

HTML
Placez ensuite le code iframe à intégrer dans un DIV avec class= »Flexible-container »

<!-- Responsive iFrame -->
<div class="Flexible-container">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d83998.91163207497!2d2.3470599!3d48.85885894999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66e1f06e2b70f%3A0x40b82c3688c9460!2sParis!5e0!3m2!1sfr!2sfr!4v1398667389648" width="600" height="450" frameborder="0" style="border:0"></iframe>
</div>

Vous voilà maintenant avec vos cartes Google et Bing en Responsive !

Vous connaissiez cette astuce ? Vous avez avez d’autres ? Laissez votre commentaire pour partager cela !

Florent Maillefaud

Carte Google et Bing : Mettez vos cartes Responsive facilement avec du CSS 1Webmaster à Sablons (Isère) / Création de sites internet WordPress.

Micro-entrepreneur depuis 2012, je vous propose la création ou la refonte de votre site internet sous WordPress et à votre image.

Que ce soit un site vitrine, un blog ou un site e-commerce pour votre entreprise ou association, laissez votre empreinte sur le web !

Abonnez-vous

Restez en contact avec moi pour recevoir mes derniers articles concernant mon activité ou mes astuces pour WordPress.

Vos données ne seront jamais exploitées par un tiers. Vous avez aussi à chaque instant la possibilité de vous désabonner

luctus ut Nullam eget libero leo
Share This