Carte Responsive en CSS

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 !

 

 

0 réponses

Répondre

Se joindre à la discussion ?
Vous êtes libre de contribuer !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.