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 :
[pastacode manual= ».Flexible-container%20%7B%0D%0A%20%20%20%20position%3A%20relative%3B%0D%0A%20%20%20%20padding-top%3A%2030px%3B%0D%0A%20%20%20%20height%3A%20100%25%3B%0D%0A%20%20%20%20overflow%3A%20hidden%3B%0D%0A%7D%0D%0A%0D%0A.Flexible-container%20iframe%2C%20%20%20%0D%0A.Flexible-container%20object%2C%20%20%0D%0A.Flexible-container%20embed%20%7B%0D%0A%20%20%20%20position%3A%20absolute%3B%0D%0A%20%20%20%20top%3A%200%3B%0D%0A%20%20%20%20left%3A%200%3B%0D%0A%20%20%20%20width%3A%20100%25%3B%0D%0A%20%20%20%20height%3A%20100%25%3B%0D%0A%7D » provider= »manual » lang= »css »/]
HTML
Placez ensuite le code iframe à intégrer dans un DIV avec class= »Flexible-container »
[pastacode manual= »%3C!–%20Responsive%20iFrame%20–%3E%0D%0A%3Cdiv%20class%3D%22Flexible-container%22%3E%0D%0A%20%20%20%20%3Ciframe%20src%3D%22https%3A%2F%2Fwww.google.com%2Fmaps%2Fembed%3Fpb%3D!1m18!1m12!1m3!1d83998.91163207497!2d2.3470599!3d48.85885894999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66e1f06e2b70f%253A0x40b82c3688c9460!2sParis!5e0!3m2!1sfr!2sfr!4v1398667389648%22%20width%3D%22600%22%20height%3D%22450%22%20frameborder%3D%220%22%20style%3D%22border%3A0%22%3E%3C%2Fiframe%3E%0D%0A%3C%2Fdiv%3E » provider= »manual » lang= »default »/]
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 !
Commentaires