Chapitre 95 | Intégration d’une Google Map

Intégration d’une Google Map

Étapes pour obtenir le code depuis Google Maps

Accédez à Google Maps.
Recherchez Île-aux-Moines, Bretagne, France.
Cliquez sur le bouton Partager / Share
Dans l’onglet Intégrer une carte, copiez le code <iframe> fourni.

Veuillez utiliser le code suivant :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Carte Île-aux-Moines, Bretagne</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="map-container">

<!-- inserer le code iframe ici -->

    </div>
</body>
</html>

Résultat attendu

Une carte Google Maps montrant Île-aux-Moines en Bretagne.

Style

Problème des dimensions fixes dans l’iframe

Lorsque Google Maps génère un code d’intégration, il inclut des dimensions fixes dans l’iframe avec les attributs width et height.

Cela pose plusieurs problèmes :

Manque de flexibilité : La carte ne s’adapte pas à la mise en page ou aux écrans de différentes tailles.
Mauvaise pratique : Ces dimensions sont difficiles à ajuster dynamiquement via CSS.

Solution

Pour une meilleure flexibilité :

Supprimez les dimensions dans l’attribut iframe.
Utilisez un conteneur parent pour définir les dimensions avec CSS. Cela permet d’adapter les styles à différents contextes.

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Carte Île-aux-Moines, Bretagne</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="map-container">
        <iframe 
            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d21529.419930070188!2d-2.8673990264643896!3d47.58378965310169!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48101ac23d1f14c9%3A0x71d07ab5d81f9c34!2s%C3%8Ele-aux-Moines!5e0!3m2!1sfr!2sfr!4v1734186267933!5m2!1sfr!2sfr" 
            style="border:0;" 
            allowfullscreen="" 
            loading="lazy" 
            referrerpolicy="no-referrer-when-downgrade">
        </iframe>
    </div>
</body>
</html>



/* Iframe Google Maps */
iframe {
    width: 100%; /* nécessaire depuis la suppression des tailles en HTML */
    height: 100%; /* nécessaire depuis la suppression des tailles en HTML */
    border: none;
}


/* Conteneur de la carte */
.map-container {
    width: 1000px;
    height: 400px;

}

.map-container {
margin:auto; /* optionnel : si vous souhiatez centrer le conteneur */

}

Explications détaillées des styles

Styles pour l’iframe

width: 100% : L’iframe s’étend sur toute la largeur disponible de son conteneur parent (ici .map-container).
height: 100% : L’iframe remplit toute la hauteur disponible de son conteneur parent.
border: none : Enlève les bordures par défaut de l’iframe pour une intégration visuelle plus propre.

Ces styles sont nécessaires car on a supprimé les attributs width et height directement dans l’HTML de l’iframe.

Styles pour le conteneur .map-container

width: 1000px : Définit une largeur de 1000 pixels pour le conteneur. Cela contrôle la taille de la carte dans la mise en page.
height: 400px : Fixe une hauteur de 400 pixels pour garantir que la carte s’affiche correctement.
margin: auto : Centre horizontalement le conteneur sur la page. Cela fonctionne uniquement parce que le conteneur est un bloc (div) avec une largeur définie.

Pourquoi utiliser le conteneur parent ?

Cela permet de contrôler la taille de la carte via le CSS plutôt que de définir les tailles dans l’iframe.
Une pratique plus flexible et maintenable pour ajuster la taille de la carte en fonction de vos besoins.

Cela ne fonctionne pas pour vous ?

Exemple fonctionnel

Note

Méthode alternative avec l’API Google Maps
Pour des besoins plus avancés ou personnalisés, l’utilisation de l’API Google Maps est une alternative puissante.
Elle nécessite toutefois un compte Google Cloud et une clé d’API, que vous devez générer depuis la console Google Cloud.

Avantages de l’API Google Maps
Personnalisation complète : vous pouvez contrôler le zoom, les styles de carte, les points d’intérêt, ou encore désactiver les contrôles interactifs.

Fonctionnalités avancées
Ajoutez des marqueurs, dessinez des polygones, ou intégrez des données dynamiques.

Responsivité
L’API permet une meilleure intégration responsive grâce à JavaScript.

Gestion dynamique
Idéal pour des applications où la carte doit réagir aux interactions utilisateur (comme un moteur de recherche).

Exigences :
Activer l’API correspondante (comme Maps JavaScript API ou Maps Embed API) dans Google Cloud.
Associer la clé d’API à votre projet et, si nécessaire, restreindre son utilisation à des domaines spécifiques.
Cette méthode est particulièrement adaptée pour des sites nécessitant une intégration sur mesure ou des interactions riches.