Comment ajouter des cartes à votre app : intégrations, cartes interactives et localisateurs de magasins

Pour ajouter une carte à votre app, décidez d'abord si vous avez besoin d'une intégration statique (un seul lieu avec un repère, comme « trouvez notre boutique ») ou d'une carte interactive (de nombreux repères issus de vos données, filtres, regroupements, « près de moi »). Pour un seul lieu, une carte intégrée est le plus rapide et, avec l'API Maps Embed de Google, gratuite. Pour les cartes interactives, utilisez une bibliothèque de cartes JavaScript — l'API JavaScript Google Maps, Mapbox GL JS, ou la bibliothèque open source Leaflet avec un fournisseur de tuiles —, stockez la latitude et la longitude de chaque lieu dans votre base de données, et restreignez votre clé API à votre propre domaine. Les informations sur les fournisseurs ci-dessous proviennent de leur documentation officielle, à la date de septembre 2026.

De quel type de carte avez-vous besoin ?

La plupart des sites de petites entreprises n'ont besoin que de la première ligne. Les annuaires, places de marché et sites de petites annonces ont besoin de la troisième et de la quatrième.

Vos options

Google Maps Platform

Le guide de démarrage de Google indique qu'il faut créer un projet Cloud avec facturation activée et activer les API souhaitées. Sa tarification à l'usage accorde aux SKU Essentials, dont Dynamic Maps, un plafond mensuel gratuit de 10 000 événements, et indique Dynamic Maps à 7,00 $ par tranche de 1 000 événements au-delà (au premier palier de volume). Le SKU Maps Embed est indiqué comme illimité et gratuit. Google propose aussi des abonnements mensuels. Consultez la tarification de Google Maps Platform pour les chiffres actuels.

Mapbox

La page tarifaire de Mapbox indique 50 000 chargements de carte mensuels gratuits pour Mapbox GL JS sur le web, puis 5,00 $ par tranche de 1 000 chargements. Consultez la tarification de Mapbox.

Leaflet et OpenStreetMap

Leaflet se présente comme une bibliothèque JavaScript open source pour des cartes interactives adaptées aux mobiles, d'environ 42 Ko de JavaScript. Elle a besoin de tuiles (les images qui composent la carte) provenant d'une source. Les serveurs de tuiles publics d'OpenStreetMap sont tentants, mais la politique d'utilisation des tuiles exige une attribution visible, interdit le téléchargement massif, n'offre aucune garantie de service et avertit que l'accès peut être retiré aux services commerciaux. Pour un produit réel, utilisez une source de tuiles commerciale ou auto-hébergée compatible avec Leaflet.

Clés API : publiques, mais restreintes

Les clés de cartes utilisées dans le navigateur sont visibles par quiconque ouvre votre page. C'est attendu, mais cela signifie que quelqu'un pourrait copier votre clé et faire grimper votre facture. Les recommandations de sécurité de Google consistent à ajouter des restrictions de site web (référent HTTP) listant vos domaines, et des restrictions d'API pour que la clé ne fonctionne que pour les API que vous utilisez.

Les clés pour les services côté serveur — par exemple le géocodage de milliers d'adresses — doivent être distinctes et conservées dans des secrets côté serveur, et non dans la page. Configurez aussi des alertes de budget ou des quotas dans la console du fournisseur, pour qu'une erreur ne se transforme pas en facture importante.

Géocodage : transformer les adresses en coordonnées une seule fois

Les cartes placent des points selon la latitude et la longitude, et non des adresses. Convertir une adresse en coordonnées s'appelle le géocodage, et la plupart des fournisseurs le facturent à chaque requête. Le schéma efficace :

1. Lorsqu'une fiche est enregistrée, géocodez son adresse côté serveur.
2. Stockez la latitude et la longitude dans la base de données.
3. La carte lit les coordonnées stockées ; elle ne géocode jamais à l'affichage de la page.

Vérifiez les conditions de chaque fournisseur sur la durée de conservation autorisée des résultats de géocodage ; elles varient.

Exemples de prompts

Une carte intégrée unique :

Sur la page Contact, ajoute une carte Google intégrée affichant notre adresse (12 High Street, Leeds) avec l'API Maps Embed, en utilisant la clé stockée dans GOOGLE_MAPS_EMBED_KEY. Ajoute un lien « Obtenir l'itinéraire » en dessous. Fais-la occuper toute la largeur sur téléphone et charge-la en différé.

Une carte interactive des annonces :

Ajoute la latitude et la longitude à la table des annonces. Quand une annonce est créée ou que son adresse change, géocode-la côté serveur avec la clé GEOCODING_API_KEY et enregistre les coordonnées. Sur la page Parcourir, affiche une carte avec un repère par annonce avec Leaflet, et un regroupement lorsque des repères se chevauchent. Un clic sur un repère affiche le titre, le prix et un lien. La carte et la liste doivent utiliser les mêmes filtres.

« Près de moi » :

Ajoute un bouton « Près de moi » qui demande la position du visiteur et affiche les annonces dans un rayon de 10 km, triées par distance. S'il refuse l'accès à sa position, permets-lui de saisir une ville à la place.

Étape par étape

1. Choisissez le type de carte dans le tableau du haut.
2. Créez le compte du fournisseur et un projet, et n'activez que les API dont vous avez besoin.
3. Créez les clés : une clé pour le navigateur restreinte à vos domaines (y compris le domaine d'aperçu pendant la création) et, si nécessaire, une clé serveur pour le géocodage.
4. Stockez les clés comme secrets et demandez à votre outil de création de les utiliser ; la clé du navigateur reste restreinte même si elle se retrouve dans la page.
5. Stockez les coordonnées de chaque lieu dans votre base de données.
6. Construisez la carte : repères, fenêtres surgissantes, regroupement, et un zoom par défaut judicieux.
7. Associez-la à une liste. Une carte seule est difficile à utiliser sur téléphone et pour les lecteurs d'écran. Affichez les mêmes résultats sous forme de liste.
8. Définissez une alerte de budget dans la console du fournisseur.
9. Publiez et testez sur le domaine en ligne, car les restrictions de référent bloquent souvent la carte tant que le domaine en ligne n'est pas ajouté.

Erreurs courantes

• Des clés sans restriction. N'importe qui peut les réutiliser sur son propre site.
• Géocoder à chaque affichage de page. Lent et coûteux ; géocodez une seule fois à l'enregistrement.
• Oublier le domaine en ligne dans les restrictions de clé. Fonctionne en aperçu, mais affiche une zone grise vide en production.
• Des mises en page réduites à la carte. Des repères sans liste sont pénibles sur petit écran et inaccessibles.
• Des centaines de repères sans regroupement. Illisible et lent.
• Attribution manquante. La plupart des fournisseurs de cartes et de tuiles l'exigent, et la masquer enfreint leurs conditions.
• Demander la position au chargement de la page. Ne la demandez que lorsque l'utilisateur appuie sur « Près de moi ».

Checklist

• Le bon type de carte est choisi pour l'usage
• La clé du navigateur est restreinte à vos domaines et aux API requises
• Les clés côté serveur sont conservées dans des secrets
• Les coordonnées sont stockées dans la base de données, géocodées une seule fois
• Les résultats sont aussi affichés sous forme de liste
• Regroupement en place pour les nombreux repères
• Attribution visible
• Alerte de budget définie chez le fournisseur
• Testé sur le domaine publié et sur téléphone

Ajouter des cartes avec Mythex

Mythex n'intègre pas de fonctionnalité de cartes ; vous apportez votre propre clé de fournisseur, vous l'ajoutez comme secret de projet (ou la collez lorsque l'agent affiche une carte de secrets), et vous demandez la carte dans le chat, comme décrit dans Intégrer n'importe quelle API. Les coordonnées vont dans la base de données du projet. Pensez à ajouter à la fois votre domaine d'aperçu et votre domaine publié aux restrictions de site de la clé, et publiez à nouveau après avoir modifié les secrets.

Les cartes se trouvent en général à côté de la recherche et des listes : voir comment ajouter une recherche à votre app, comment créer un site d'annuaire et comment créer un site pour petite entreprise.

Questions