Comment responsive et centrer lien de google map ?

Résolu

Tiger46 -

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 ?
Roole map - Guide
Google maps - Guide
Google photo - Télécharger - Albums photo
Google maps localisation maison - Guide
Comment créer un compte google - Guide

1 réponse

Réponse 1 / 1
dugenou Contributeur
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%;">
```
0

Réagir
1. Tiger46 Auteur
  
  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é :) ...
  
  0
  
  Réagir
2. dugenou Contributeur
  
  @Tiger46Pour 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.
  
  0
  
  Réagir
3. Tiger46 Auteur
  
  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>
  
  0
  
  Réagir
4. Tiger46 Auteur
  
  adapt conteneur true fonctionne pas et largeur 100% non plus :) ...
  
  0
  
  Réagir
5. dugenou Contributeur
  
  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%; }
  
  0
  
  Réagir

Comment responsive et centrer lien de google map ?

1 réponse

Discussions similaires

Newsletters