Comment intégrer Google Maps sur votre site web

Prérequis

• Niveau : bases HTML/CSS/JS, savoir copier-coller un snippet.
• Outils : VS Code + Live Server, navigateur moderne. Pour Google Maps : compte Google Cloud avec carte de paiement (la facturation est requise même pour le quota gratuit).
• Temps estimé : 30 min (iframe), 1 h (API), 30 min (Leaflet).

Pourquoi intégrer une carte ?

Une carte interactive sur votre page contact multiplie par 3 le taux de conversion en local, donne confiance, et évite à vos clients de chercher manuellement votre adresse. Pour la plupart des cas, Leaflet + OpenStreetMap suffit largement et reste 100 % gratuit, sans clé ni quota.

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 limite 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

Voici la mise en pratique pour Ajouter plusieurs marqueurs. Le bloc ci-dessous est copiable directement dans votre projet, lisible ligne par ligne. Lisez-le une première fois en survol pour repérer la structure générale, puis adaptez les noms de variables, identifiants et valeurs à votre contexte avant de l’exécuter en local.

// 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

Voici la mise en pratique pour Rendre la carte responsive. Le bloc ci-dessous est copiable directement dans votre projet, lisible ligne par ligne. Lisez-le une première fois en survol pour repérer la structure générale, puis adaptez les noms de variables, identifiants et valeurs à votre contexte avant de l’exécuter en local.

<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>

Erreurs fréquentes

google.maps.Marker renvoie un avertissement de dépréciation

Cause : depuis février 2024, google.maps.Marker est déprécié au profit de AdvancedMarkerElement (qui supporte 3D, accessibilité, contenu HTML).
Solution : en nouveau code, utilisez const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); et new AdvancedMarkerElement({ map, position, title }). Le code Marker classique fonctionne encore en 2026 (informations vérifiées en avril 2026, susceptibles d’évoluer) mais n’est plus mis à jour.

« This page can’t load Google Maps correctly »

Cause : clé API non activée, facturation non liée, ou domaine non autorisé.
Solution : dans Google Cloud Console, activez « Maps JavaScript API », liez une carte de paiement (200 $/mois gratuits), restreignez la clé à votre domaine.

Carte qui s’affiche en gris

Cause : conteneur sans hauteur définie en CSS.
Solution : donnez explicitement height: 450px (ou ratio 16:9) au #map.

Attribution OpenStreetMap manquante

Cause : l’attribution est obligatoire par la licence ODbL d’OSM, mais souvent réduite à « © OpenStreetMap ».
Solution : utilisez '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'.

Exercice pratique

Méthode 2 : Maps JavaScript API avec marqueur personnalisé

L’iframe affiche une carte figée. Dès que vous voulez plusieurs points d’intérêt, des popups personnalisés ou une réaction au clic, il faut passer à l’API JavaScript. Étape 1 : créer un projet Google Cloud (console.cloud.google.com), activer la facturation, activer Maps JavaScript API. Étape 2 : générer une clé API et la restreindre par HTTP referrer (monsite.sn/*) et par API. Étape 3 : charger l’API en mode moderne via le loader inline officiel.

async function initMap() {
  const { Map } = await google.maps.importLibrary('maps');
  const { AdvancedMarkerElement } = await google.maps.importLibrary('marker');
  const carte = new Map(document.getElementById('carte'), {
    center: { lat: 14.6928, lng: -17.4467 },
    zoom: 12, mapId: 'VOTRE_MAP_ID'
  });
  const agences = [
    { nom: 'Plateau', position: { lat: 14.6708, lng: -17.4376 } },
    { nom: 'Almadies', position: { lat: 14.7448, lng: -17.5181 } }
  ];
  agences.forEach(a => new AdvancedMarkerElement({ map: carte, position: a.position, title: a.nom }));
}

AdvancedMarkerElement remplace l’ancien google.maps.Marker déprécié depuis février 2024.

Géocodage : adresse vers coordonnées

Voici la mise en pratique pour Géocodage : adresse vers coordonnées. Le bloc ci-dessous est copiable directement dans votre projet, lisible ligne par ligne. Lisez-le une première fois en survol pour repérer la structure générale, puis adaptez les noms de variables, identifiants et valeurs à votre contexte avant de l’exécuter en local.

const { Geocoder } = await google.maps.importLibrary('geocoding');
const geocoder = new Geocoder();
const { results } = await geocoder.geocode({ address: 'Avenue Cheikh Anta Diop, Dakar, Sénégal' });
if (results[0]) carte.setCenter(results[0].geometry.location);

Géolocalisation : centrer sur l’utilisateur

Voici la mise en pratique pour Géolocalisation : centrer sur l’utilisateur. Le bloc ci-dessous est copiable directement dans votre projet, lisible ligne par ligne. Lisez-le une première fois en survol pour repérer la structure générale, puis adaptez les noms de variables, identifiants et valeurs à votre contexte avant de l’exécuter en local.

navigator.geolocation.getCurrentPosition(pos => {
  const position = { lat: pos.coords.latitude, lng: pos.coords.longitude };
  carte.setCenter(position); carte.setZoom(15);
  new AdvancedMarkerElement({ map: carte, position, title: 'Vous êtes ici' });
});

Coût : SKU, free tier et alertes

Depuis le 1er mars 2025, Google a remplacé le crédit unifié de 200 USD/mois par un free tier par SKU. Maps JavaScript API (Essentials) : 10 000 chargements gratuits/mois. Geocoding API (Pro) : 5 000 événements gratuits/mois. Activez systématiquement une alerte budget dans Google Cloud à 5 000 FCFA, 10 000 FCFA et 20 000 FCFA.

Alternative sans clé : Leaflet + OpenStreetMap

Si la facturation Google vous inquiète, Leaflet rend la même chose en gratuit total. La carte de fond vient d’OpenStreetMap, alimentée par des contributeurs bénévoles dont une communauté active à Bamako et Cotonou.

<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='carte' style='height: 400px;'></div>
<script>
const carte = L.map('carte').setView([14.6928, -17.4467], 12);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap' }).addTo(carte);
L.marker([14.6708, -17.4376]).addTo(carte).bindPopup('Agence Plateau');
</script>

Avantages : pas de clé, pas de carte bancaire, code 5x plus court. Inconvénients : pas de Street View, données moins riches.

Performance : lazy load de la carte

Charger Maps JavaScript ajoute environ 200 KB minifié. Solution : ne charger l’API que lorsque la carte entre dans le viewport.

const observer = new IntersectionObserver(entries => {
  if (entries[0].isIntersecting) { chargerGoogleMaps(); observer.disconnect(); }
});
observer.observe(document.getElementById('carte'));

Pour explorer plus loin sur les patterns frontend modernes adaptés au contexte ouest-africain, voir aussi le guide événements JavaScript et le guide media queries responsive. Tester systématiquement sur Galaxy A03 ou équivalent à 200 EUR avec 4G locale dégradée reste le seul juge fiable de la performance perçue par la majorité des visiteurs locaux.

Pour approfondir sur les patterns frontend modernes adaptés au contexte ouest-africain, voir aussi le guide événements JavaScript et le guide media queries responsive. Tester systématiquement sur Galaxy A03 ou équivalent à 200 EUR avec 4G locale dégradée reste le seul juge fiable de la performance perçue par la majorité des visiteurs locaux.

À lire ensuite sur les patterns frontend modernes adaptés au contexte ouest-africain, voir aussi le guide événements JavaScript et le guide media queries responsive. Tester systématiquement sur Galaxy A03 ou équivalent à 200 EUR avec 4G locale dégradée reste le seul juge fiable de la performance perçue par la majorité des visiteurs locaux.

À lire ensuite sur les patterns frontend modernes adaptés au contexte ouest-africain, voir aussi le guide événements JavaScript et le guide media queries responsive. Tester systématiquement sur Galaxy A03 ou équivalent à 200 EUR avec 4G locale dégradée reste le seul juge fiable de la performance perçue par la majorité des visiteurs locaux.

Adaptation au contexte ouest-africain : performance, équipe, marché

Pour un développeur basé à Dakar, Abidjan, Bamako, Cotonou, Lomé, Ouagadougou, Niamey ou Conakry qui livre des sites web ou applications custom à des PME locales, trois adaptations pèsent sur le succès des projets. Premièrement, la connectivité 4G inégale impose de réduire le poids des pages au strict nécessaire — un site qui charge en 6 secondes perd 40 % de ses visiteurs avant l’affichage. Deuxièmement, le profil typique des développeurs disponibles sur le marché local est majoritairement formé sur du JavaScript moderne et du PHP, avec une expertise variable sur les outils plus avancés (TypeScript, frameworks edge, design systems). Adapter la pile technique au profil d’équipe disponible sur place évite la dette technique liée au turn-over.

Troisièmement, le coût en FCFA des services cloud doit être anticipé dans le budget. Hetzner CX22 à 4 500 FCFA/mois reste imbattable pour un démarrage, Cloudflare Pages gratuit pour les sites statiques, Backblaze B2 à 6 USD/TB/mois pour les sauvegardes. Pour les projets B2C qui exigent une latence faible, héberger sur un CDN avec PoP africain (Cloudflare Lagos, Africa Data Centres) divise par trois la latence perçue par rapport à un déploiement européen sans CDN.

Tester sur appareils réels avant la mise en production

Plus important que tous les outils synthétiques, tester son site sur un Android d’entrée de gamme avec une connexion 4G locale dégradée donne le seul verdict qui compte. Galaxy A03 à 200 EUR neuf, Tecno Spark, Itel A60 sont les appareils dominants chez les visiteurs ouest-africains. Sur ces téléphones, un site qui semble rapide sur DevTools peut être laggy en réalité. Trois conseils pratiques. Premièrement, garder un appareil de test physique à portée de main pour vérifier chaque livraison majeure. Deuxièmement, profiler avec Chrome DevTools en mode Slow 4G + 4x CPU slowdown pour simuler ces conditions. Troisièmement, mesurer en conditions réelles avec PageSpeed Insights qui agrège les données du Chrome User Experience Report sur 28 jours — la donnée terrain qui compte vraiment.

Erreurs courantes en développement web à éviter

Trois patterns reviennent dans les projets web mal exécutés et coûtent cher à corriger plus tard. Premier pattern : copier-coller de code Stack Overflow sans comprendre le contexte d’origine. Une solution qui marche pour un cas particulier devient un bug subtil dans un autre — toujours adapter au contexte de votre projet. Deuxième pattern : ignorer les warnings de la console. Chaque warning est un signal qui mérite d’être lu et compris. Une console pleine de warnings finit par cacher les vrais problèmes. Troisième pattern : ne pas tester sur de vrais appareils. DevTools simule mais ne remplace pas un test physique sur un Android d’entrée de gamme avec une 4G dégradée — c’est le contexte réel d’usage de la majorité des visiteurs locaux.

Dans la continuité sur les bonnes pratiques de développement web modernes adaptées au contexte ouest-africain, voir aussi le guide responsive design et le guide Bootstrap 5. Documenter chaque décision technique majeure dans un fichier ADR (Architecture Decision Record) prend dix minutes et fait gagner des heures lors d’un incident ou d’un audit.

Pour creuser ce sujet

• Consommer une API REST en JS
• Référence Google : Maps JavaScript API
• Migration Marker : AdvancedMarkerElement migration
• Référence Leaflet : Leaflet API Reference
• Tuiles alternatives : Leaflet Providers (CartoDB, Stadia, etc.)