Comment responsive et centrer lien de google map ?

Résolu

Tiger46 Messages postés 247 Date d'inscription Statut Membre Dernière intervention -
Tiger46 Messages postés 247 Date d'inscription Statut Membre Dernière intervention - 12 oct. 2018 à 01:23

Bonjour ...
lorsqu'on va sur google map on peut avoir le code pour intégrer la map dans une iframe mais la map ensuite n'est pas responsive apparemment ou ne s'adapte pas en taille aux mobiles et n'est pas centrée ?

Ca donne ce code actuellement :

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d11388.116177725571!2d1.428995!3d44.4735774!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x1a0c92ec02a4136e!2sGarage+Mari%C3%A9!5e0!3m2!1sfr!2sfr!4v1539204166329" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

Peut on arranger ça et si oui comment ? Merci :) ...

Merci :)

Afficher la suite

A voir également:

Comment responsive et centrer lien de google map ?
Google maps satellite - Guide
Google maps - Guide
Dns google - Guide
Lien url - Guide
Créer un lien pour partager des photos - Guide

1 réponse

Réponse 1 / 1

dugenou Messages postés 6087 Date d'inscription Statut Contributeur Dernière intervention 1 452

Bonjour,

Dans ta feuille de style, tu peux donner une dimension maxi à l'iframe, par exemple :

iframe {
        margin-left:auto;
        margin-right:auto;
        max-width: 100%;
    }

Si tu n'utilises pas de feuille de style, tu dois pouvoir aussi placer l'iframe dans une <div> et ajouter ce style directement à la <div> :

<div style="margin-left:auto; margin-right:auto; max-width:100%;">

Tiger46 Messages postés 247 Date d'inscription Statut Membre Dernière intervention 1

Bjr ... merci dugenou :) ... Je vais essayer :) ... Cependant ou dois je mettre ce code précisément car je peux faire un copié colé mais rajouter une div etc c'est plus compliqué .. ? :) ... Ceci dit en mettant largeur 100% déjà ça dépasse plus sur les bords et c'est centré :) ...

dugenou Messages postés 6087 Date d'inscription Statut Contributeur Dernière intervention 1 452 > Tiger46 Messages postés 247 Date d'inscription Statut Membre Dernière intervention

Pour ce qui est du code CSS, c'est dans la feuille de style de ton site, en général, c'est le fichier style.css, mais dans de nombreux cas, ce n'est pas sous ce nom qu'on le trouve.

Pour ce qui est de la <div>, c'est dans le code HTML de ton fichier. Si tu utilises un CMS, c'est à partir de l'éditeur, il doit y avoir un bouton permettant d'insérer du HTML. Si tu utilises une <div>, n'oublie pas la balise de fermeture </div>.

N'utilise pas les deux solutions en même temps, c'est l'une ou l'autre.

Tiger46 Messages postés 247 Date d'inscription Statut Membre Dernière intervention 1

Et ça ? Comment l'aligner au centre ? :)

<div class="fb-page" data-href="https://www.facebook.com/Bijouterie-Lagarde-533675443667275/" data-tabs="timeline" data-width="500" data-small-header="false" data-adapt-container-width="false" data-hide-cover="false" data-show-facepile="false"><blockquote cite="https://www.facebook.com/Bijouterie-Lagarde-533675443667275/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/Bijouterie-Lagarde-533675443667275/">Bijouterie Lagarde</a></blockquote></div>

Tiger46 Messages postés 247 Date d'inscription Statut Membre Dernière intervention 1

adapt conteneur true fonctionne pas et largeur 100% non plus :) ...

dugenou Messages postés 6087 Date d'inscription Statut Contributeur Dernière intervention 1 452

Comme tu as déjà une class="fb-page", essaie en créant une class avec le même nom dans ta feuille de style, avec ces attributs :

.fb-page {
        margin-left:auto;
        margin-right:auto;
        max-width: 100%;
    }

Discussions similaires

Copier un lien instagram

Rajout de lien sur plusieurs pages

Votre réponse

Discussions similaires