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

Pour ajouter une carte à votre application, décidez d'abord si vous avez besoin d'une intégration statique (un seul emplacement avec un repère, comme « trouvez notre boutique ») ou d'une carte interactive (de nombreux repères issus de vos données, filtres, regroupement, « près de moi »). Pour un seul emplacement, 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 (API Google Maps JavaScript, Mapbox GL JS, ou la bibliothèque libre Leaflet avec un fournisseur de tuiles), enregistrez la latitude et la longitude de chaque lieu dans votre base de données, et restreignez votre clé API à votre propre domaine. Les détails des fournisseurs ci-dessous proviennent de leur documentation officielle, en 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 répertoires, les marketplaces et les sites d'annonces ont besoin de la troisième et de la quatrième.

Vos options

Plateforme Google Maps

Le guide de démarrage de Google indique que vous devez créer un projet Cloud avec facturation activée et activer les API voulues. Sa tarification à l'utilisation accorde aux SKU Essentials, y compris Dynamic Maps, un plafond gratuit de 10 000 événements par mois, et indique Dynamic Maps à 7,00 $ par 1 000 événements au-delà (au premier palier de volume). Le SKU Maps Embed est indiqué comme illimité et gratuit. Google vend aussi des forfaits d'abonnement mensuels. Consultez la tarification de Google Maps Platform pour les chiffres actuels.

Mapbox

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

Leaflet et OpenStreetMap

Leaflet se décrit comme une bibliothèque JavaScript libre pour des cartes interactives adaptées aux mobiles, d'environ 42 Ko de JavaScript. Elle a besoin de tuiles de carte (les images de 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 hébergée par vous-même qui fonctionne avec Leaflet.

Clés API : publiques, mais restreintes

Les clés de carte utilisées dans le navigateur sont visibles par quiconque ouvre votre page. C'est normal, mais cela signifie que quelqu'un peut copier votre clé et faire grimper votre facture. Les directives de sécurité de Google recommandent d'ajouter des restrictions de site web (référent HTTP) qui listent vos domaines, et des restrictions d'API pour que la clé ne fonctionne que pour les API utilisées.

Les clés pour les services serveur (par exemple le géocodage de milliers d'adresses) doivent être des clés distinctes gardées dans les 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 puisse pas se transformer en une grosse facture.

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

Les cartes affichent des latitudes et des longitudes, pas des adresses. Convertir une adresse en coordonnées s'appelle le géocodage, et la plupart des fournisseurs le facturent par requête. Le modèle efficace :

1. Quand une annonce est enregistrée, géocodez son adresse sur le serveur.
2. Enregistrez la latitude et la longitude dans la base de données.
3. La carte lit les coordonnées enregistrées; elle ne géocode jamais à l'affichage de la page.

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

Exemples de consignes

Une seule carte intégrée :

Sur la page Contact, ajoute une carte Google intégrée qui affiche notre adresse (12 High Street, Leeds) avec l'API Maps Embed, la clé étant dans GOOGLE_MAPS_EMBED_KEY. Ajoute un lien « Obtenir l'itinéraire » en dessous. Elle doit occuper toute la largeur sur les téléphones et être chargée paresseusement.

Une carte interactive d'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 sur le serveur avec la clé dans 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 quand les repères se chevauchent. Cliquer 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 à moins de 10 km, triées par distance. S'il refuse l'accès à la position, laisse-le taper le nom d'une ville.

Étape par étape

1. Choisissez le type de carte dans le tableau du début.
2. Créez le compte du fournisseur et un projet, puis activez seulement les API nécessaires.
3. Créez les clés : une clé pour le navigateur, restreinte à vos domaines (y compris le domaine d'aperçu pendant la construction) et, si nécessaire, une clé serveur pour le géocodage.
4. Enregistrez les clés comme secrets et demandez à votre créateur de les utiliser; la clé du navigateur reste tout de même restreinte même si elle se retrouve dans la page.
5. Enregistrez les coordonnées de chaque lieu dans votre base de données.
6. Construisez la carte : repères, fenêtres contextuelles, regroupement et un zoom par défaut raisonnable.
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. Fixez 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 fois à l'enregistrement.
• Oublier le domaine en ligne dans les restrictions de clé. Fonctionne en aperçu, puis un rectangle gris 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.
• L'attribution manquante. La plupart des fournisseurs de cartes et de tuiles l'exigent, et la masquer contrevient à leurs conditions.
• Demander la position au chargement de la page. Ne la demandez que lorsque l'utilisateur touche « Près de moi ».

Liste de vérification

• Le bon type de carte est choisi pour le besoin
• La clé du navigateur est restreinte à vos domaines et aux API requises
• Les clés serveur sont gardées dans les secrets
• Les coordonnées sont enregistrées dans la base de données et géocodées une seule fois
• Les résultats sont aussi affichés sous forme de liste
• Regroupement pour les nombreux repères
• Attribution visible
• Alerte de budget configurée chez le fournisseur
• Testé sur le domaine en ligne et sur téléphone

Ajouter des cartes avec Mythex

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

Les cartes sont généralement placées à côté de la recherche et des listes : voir comment ajouter la recherche à votre application, comment créer un site de répertoire et comment créer le site web d'une petite entreprise.

Questions