Comment intégrer Google Maps sur votre site web

3 méthodes pour intégrer une carte Google Maps

Selon vos besoins, choisissez la méthode adaptée :

Méthode 1 : iframe (la plus simple, 2 minutes)

1. Allez sur Google Maps
2. Cherchez votre adresse (ex: « Dakar, Place de l’Indépendance »)
3. Cliquez sur Partager → Intégrer une carte
4. Copiez le code iframe

<!-- Coller dans votre HTML -->
<div class="map-container">
    <iframe 
        src="https://www.google.com/maps/embed?pb=!1m18!..."
        width="100%" 
        height="450" 
        style="border:0;" 
        allowfullscreen="" 
        loading="lazy"
        referrerpolicy="no-referrer-when-downgrade">
    </iframe>
</div>

<style>
.map-container {
    position: relative;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
</style>

Méthode 2 : Google Maps API JavaScript

Pour plus de contrôle (marqueurs personnalisés, popups, styles) :

Étape 1 : Obtenir une clé API

1. Allez sur console.cloud.google.com
2. Créez un projet → Activez « Maps JavaScript API »
3. Créez une clé API dans « Identifiants »
4. Restreignez la clé à votre domaine pour la sécurité

Étape 2 : Le code

<div id="map" style="width:100%;height:450px;border-radius:12px;"></div>

<script>
function initMap() {
    // Coordonnées de Dakar
    const dakar = { lat: 14.6928, lng: -17.4467 };
    
    // Créer la carte
    const map = new google.maps.Map(document.getElementById('map'), {
        zoom: 14,
        center: dakar,
        styles: [
            // Style personnalisé (couleurs modifiées)
            { featureType: "water", stylers: [{ color: "#a2daf2" }] },
            { featureType: "road", stylers: [{ lightness: 30 }] }
        ]
    });
    
    // Ajouter un marqueur
    const marker = new google.maps.Marker({
        position: dakar,
        map: map,
        title: 'ITSkillsCenter - Dakar',
        animation: google.maps.Animation.DROP
    });
    
    // Info-bulle au clic sur le marqueur
    const infoWindow = new google.maps.InfoWindow({
        content: `
            <div style="padding:10px;">
                <h3 style="margin:0 0 5px;">ITSkillsCenter</h3>
                <p style="margin:0;">Centre de formation digitale</p>
                <p style="margin:5px 0 0;">📍 Dakar, Sénégal</p>
            </div>
        `
    });
    
    marker.addListener('click', () => {
        infoWindow.open(map, marker);
    });
}
</script>

<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=VOTRE_CLE&callback=initMap">
</script>

Méthode 3 : Leaflet.js (100% gratuit, open source)

Alternative à Google Maps, sans clé API, sans limité d’utilisation :

<!-- CDN Leaflet -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

<div id="map" style="width:100%;height:450px;border-radius:12px;"></div>

<script>
// Initialiser la carte centrée sur Dakar
const map = L.map('map').setView([14.6928, -17.4467], 13);

// Ajouter les tuiles OpenStreetMap (gratuit)
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap'
}).addTo(map);

// Marqueur avec popup
L.marker([14.6928, -17.4467])
    .addTo(map)
    .bindPopup('<b>ITSkillsCenter</b><br>Formation digitale à Dakar')
    .openPopup();
</script>

Ajouter plusieurs marqueurs

// Liste de vos emplacements
const lieux = [
    { lat: 14.6928, lng: -17.4467, nom: "Siège Dakar", desc: "Bureau principal" },
    { lat: 14.7646, lng: -17.3660, nom: "Antenne Pikine", desc: "Centre de formation" },
    { lat: 14.6937, lng: -17.4441, nom: "Coworking", desc: "Espace partagé" }
];

lieux.forEach(lieu => {
    L.marker([lieu.lat, lieu.lng])
        .addTo(map)
        .bindPopup(`<b>${lieu.nom}</b><br>${lieu.desc}`);
});

Rendre la carte responsive

<style>
.map-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* Ratio 16:9 */
    border-radius: 12px;
    overflow: hidden;
}
.map-wrapper #map {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
</style>

<div class="map-wrapper">
    <div id="map"></div>
</div>

Exercice pratique