donner des dimensions a un iframe google map

12 octobre 2017 à 11:37:59

Bonjour,

je fais appel aux âmes charitables car je n'arrive pas à résoudre un problème.

Je dois insérer un carte google map en iframe dans le footer de ma page web or, après avoir été sur le site google, copier l'iframe, l'avoir insérer dans l'html du footer, enlever le width et le height(pour définir les dimensions en css) celle-ci apparaît en bandeau sur toute la largeur(le width 100% fonctionne) mais pas moyen de l'agrandir en hauteur(le height ne fonctionne pas.

Afin de mieux cerner le problème,

Voici le code html:

      <div class="map-responsive">
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2624.218394297938!2d2.3476347155500012!3d48.87311307928886!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66e145ccb3091%3A0x9495beee8c96ec27!2s25+Rue+d&#39;Hauteville%2C+75010+Paris!5e0!3m2!1sfr!2sfr!4v1507715078586" frameborder="0" style="border:0" allowfullscreen></iframe>
      </div>      
    </footer>

Puis le css:

.map-responsive iframe/*carte googlemap*/
{
	width: 100%;
	height: 100%;
	/*position: relative;*/(j'aurai un formulaire à placer dessus ensuite)
}

Voici le rendu:

La personne qui me retirera l'épine du pied aura mon entière reconnaissance!!

Bonne journée!!!

gueb3.5

Schizav

12 octobre 2017 à 11:41:04

Regarde dans ton CSS, tu as forcément un padding ou un margin quelque part qui empêche le height d'être à 100%

Le problème en informatique se trouve toujours entre la chaise et le bureau.

Lord Morpheus

12 octobre 2017 à 11:44:50

Bonjour,

Pourquoi ne pas faire directement un tour sur la documentation officiel de Google ? https://developers.google.com/maps/documentation/javascript/?hl=fr

Rien de bien compliqué pour mettre en place l'API.

Lord Morpheus, Seigneur Morphée, Dieu Grecs des Songes, Fils de la Nuit et du Sommeil

Mewen_bzh

12 octobre 2017 à 11:46:06

Bonjour,

Définir height:100% fonctionnera si et seulement si la taille du parent est clairement définie. Pour les iframe Google Maps, il faut définir une min-height en px pour la hauteur de ta carte.

Et au passage, petit retour sur une erreur classique de débutant : https://la-cascade.io/pourquoi-height-100-ne-marche-pas/

Je ne réponds pas aux messages privés.