Blog

Gestion des Cartes sur les PWAs: choisissez votre fournisseur

Vous ne le savez peut être pas, mais depuis quelques mois Google a modifié sa politique tarifaire concernant ses services cartographiques et leur fonctionnement. Auparavant mise à votre disposition de manière totalement gratuite, l'utilisation de Google Maps est désormais soumise à une tarification qui peut vous impacter si vous atteignez un certain taux d'utilisation sur votre PWA.

Explications.

Afficher une carte, comment ca marche?

Lorsque que vous affichez une carte dans votre app, vous affichez en fait deux éléments:
- les points que vous avez créés grâce au CMS GoodBarber
- le fond de carte, qui provient d'un prestataire externe

Le prestataire externe peut être différent en fonction de la façon dont vous allez distribuer votre application: iOS, Android ou Web. Du côté natif, pour iOS les cartes sont  gérées de façon totalement indépendante par Apple, et pour Android, il faut évidemment passer par Google Map. Pour les Progressive Web Apps en revanche, il est possible de choisir parmi différents prestataires de service et c'est justement la nouveauté que nous vous proposons aujourd'hui.

Les fournisseurs de cartes ne sont pas nombreux sur le marché et les nouveaux usages donnent à la donnée cartographique de plus en plus de valeur. Si ces services étaient autrefois gratuits, une tarification est désormais appliquée dans la grande majorité des cas. Dans ce contexte, il était indispensable pour nous de vous laisser la possibilité de choisir le fournisseurs qui convient le mieux parmi deux institutions du marché: Google Maps et Mapbox.

Voyons de plus prêt ce qui différencie ces deux fournisseurs de carte.

Google Maps

Vous trouverez les tarifs complets ici
Vous trouverez les tarifs complets ici
Google Maps est le grand leader du marché des fournisseurs de carte avec une dizaine d'années d'existence à son actif. Jusqu'a aujourd'hui il s'agissait de l'unique fournisseur de carte disponible sur GoodBarber pour votre PWA.

Google Maps utilise le principe de la carte glissante, pour l'affichage de ses cartes qui repose sur l'assemblage de "tuiles" pour afficher la carte. La carte est découpée en petits fichiers d’images de 256px de côtés appelés et générés au fil de l’eau en fonction du niveau de zoom et de la navigation de l’utilisateur.  Il s'agit de la manière classique d'afficher des cartes sur le web.


Pour afficher les cartes de votre PWA, nous utilisons l'API Dynamic Maps qui est désormais devenue payante. Comme vous pouvez le voir sur l'image ci-dessous, la tarification s'applique sur le nombre de chargements de vos cartes. Google vous offre d'ores et déjà un avoir de 200$ mensuel ce qui équivaut à 28 000 chargements. Au-delà, Google vous prélèvera de 7$ pour 100 000 chargements supplémentaires.
28 000 chargements, cela représente déjà un bon quota pour une app avec une base d'utilisateurs moyenne. Mais nous voulions vous laisser la possibilité de pouvoir choisir un autre fournisseur de cartes, qui propose des tarifs qui diffèrent quelque peu de ceux de Google.

Selon Google voilà comment sont comptabilisés les chargements:

"Une fois qu'une page ou une application web charge une carte [...] les interactions de l'utilisateur avec celle-ci, telles que le panoramique, le zoom ou le changement de couche, ne génèrent pas de chargement de carte supplémentaire et n'affectent pas les limites d'utilisation."
Intégralité ici

Mapbox

Vous trouverez les tarifs complets ici
Vous trouverez les tarifs complets ici
Mapbox est un service de cartographie qui, à la différence des maps de Google, est grâce à des tuiles vectorielles, donnant un aspect plus fluide et rapide à l'affichage des cartes. Les tuiles ne sont plus sous la forme d’images, mais des fichiers contenant pour chaque emprise géographique, les données permettant de décrire les éléments qui la compose avec des tracés vectoriels.

Concernant les tarifs, on parle ici de vues et non de chargement et 50 000 vous sont offertes par mois. au delà, Mapbox vous prélevera de 0,50$ pour 1 000 vues supplémentaires.
Selon Mapbox, une vue est comptabilisée lorsque "quatre tuiles sont chargées simultanément sur la même fenêtre."



Vous l'aurez compris chaque fournisseurs de carte est différents, tant au niveau des techniques utilisées pour l'affichage des cartes, que des services proposées mais aussi des conditions de tarification. Nous vous proposons donc de pouvoir changer de fournisseur à votre guise, en un seul clic depuis le back office. 

Comment choisir votre fournisseur de carte?

Dans votre back office, rendez vous dans le menu:

Paramètres > Options de l'app > Paramètres généraux

puis choisissez l'onglet Connexions Externes. Vous trouverez ici un menu déroulant vous permettant de choisir entre Google Maps et Mapbox.
Une fois votre fournisseur sélectionné, il vous faudra renseigner sa clé d'API  et de mettre à jour votre PWA. Votre fournisseur de cartes sera alors modifié pour l'intégralité des cartes potentiellement présentes dans votre PWA c'est à dire: dans la section Lieux (map), dans la section Agenda (dans le détails de vos évènements), dans le widget Carte de la Home.

POUR ALLER PLUS LOIN :

 

  • En fonction du nom de domaine que vous souhaitez attribuer à votre site en ligne, GoodBarber vous fait part de ses conseils et de sa méthode. Découvrez les étapes pour installer un nom de domaine sur votre Web App en HTML5 , vous verrez que la modification de certains éléments, comme ici un URL, n'a rien de sorcier ! 
  • Pour aller plus loin dans la modification des éléments de votre système, découvrez comment utiliser la Settings API pour personnaliser votre application  en ligne. A travers différentes étapes, cet outil vous permettra d'approfondir le développement de votre app en fonction de vos envies !
  • Si vous avez développé une Shopping App, vous êtes probablement amené à proposer un service de livraison. Une méthode vous permettant de réduire les coûts pour vos utilisateurs consiste à proposer la livraison gratuite. Vous pouvez définir vous-même les conditions de ce système de réduction en ligne. En fonction de vos objectifs et de votre stratégie, découvrez les bénéfices de la livraison gratuite .
  • Vous êtes nombreux à exploiter l'outil "agenda" dans votre app, désormais vous pouvez mettre en valeur vos évènements avec nos nouveaux Templates Events . Nous vous proposons un nouveau système de mise en forme en ligne, pour mettre en valeur les éléments que vous souhaitez accentuer. Découvrez la méthode et ses quelques étapes pour intégrer ces nouveaux templates !
  • Nous avons mis à votre disposition des nouveaux éléments et un nouveau tableau de bord pour votre back office , pour que vous puissiez exploiter notre outil de manière plus approfondie ! La modification de ce tableau de bord a pour but de faciliter la création en ligne de votre outil. En fonction de vos besoins et de vos recommandations, nos procédons à des améliorations régulières pour faciliter toutes les étapes de votre travail !

À lire aussi

  4 min de lecture

Votre catalogue immobilier Meta s'affiche dans l'app de votre agence

En bref. Catalogue Meta, carte et Catalogue Meta, annonces sont deux extensions de GoodBarber, l'app builder sans code, qui lisent le catalogue « Home listings » d'une agence, le flux XML qu'elle donne à Meta pour ses publicités immobilières. Catalogue Meta, carte remplit une section Carte : chaque bien dont la position est connue devient un repère avec sa fiche, classé par distance quand l'app connaît la position de l'utilisateur. Catalogue Meta, annonces remplit une section Article avec les mêmes biens, les plus récents en premier. Vous les connectez avec le lien du flux de votre catalogue. Elles sont gratuites pour les apps Content.Les agences construisent ce catalogue pour toucher les acheteurs et les locataires là où ils passent leur temps. Les apps de Meta ont été utilisées par 3,60 milliards de personnes par jour en moyenne en juin 2026, 3 % de plus en un an, selon les résultats du deuxième trimestre 2026 de Meta publiés le 29 juillet 2026. Voici comment les deux extensions fonctionnent pour une agence de Hambourg.

  5 min de lecture

Des cartes à vos couleurs

Vous vous demandez peut-être ce qu'une carte à vos couleurs change vraiment. Voici trois exemples, de la cohérence de votre design à l'histoire que votre app veut raconter.

  3 min de lecture

Vos événements et campagnes Givebutter s'affichent dans votre app

En bref. Givebutter Événements et Givebutter Campagnes sont deux extensions de GoodBarber, l'app builder sans code, qui lisent les campagnes d'une organisation sur Givebutter. Givebutter Événements remplit une section Agenda avec les événements à venir, à l'heure du fuseau de l'événement, avec leur lieu, sauf si vous le réservez aux participants. Givebutter Campagnes remplit une section Article avec les formulaires et les pages de collecte actifs, avec leur visuel de couverture et leur description. Vous les connectez avec une clé d'API Givebutter. Elles sont gratuites pour les apps Content : chaque section compte pour une des extensions incluses dans votre plan.Une grande partie des dons passe déjà par Givebutter. Lors du Giving Tuesday 2025, les donateurs y ont versé 20 millions de dollars, contre 16,4 millions en 2024, soit plus de 93 000 donateurs sur 16 000 campagnes actives, selon le bilan de Givebutter publié le 8 décembre 2025. Voici comment les deux extensions fonctionnent pour un refuge pour animaux.

Conseils pour créer une app