Migrer de Google Maps vers OpenStreetMap

La migration technique de l'API Google Maps JavaScript vers MapLibre GL JS + TileCat est en général une question d'heures, pas de semaines : les deux APIs couvrent les mêmes concepts de base (carte, marqueur, popup), avec une syntaxe différente. Ce guide fait la correspondance concept par concept.

1. Pourquoi migrer

Pas de carte bancaire ni de compte de facturation Google Cloud à maintenir juste pour garder une clé active.
Prix public et prévisible — voir le comparatif détaillé des tarifs.
Données OpenStreetMap : licence ODbL, pas les conditions d'utilisation propriétaires de Google qui restreignent certains usages hors-ligne ou la mise en cache prolongée.

2. Table de correspondance

Google Maps JS API	MapLibre GL JS
`new google.maps.Map(el, options)`	`new maplibregl.Map({ container, style })`
`new google.maps.Marker({ position, map })`	`new maplibregl.Marker().setLngLat(...).addTo(map)`
`new google.maps.InfoWindow({ content })`	`new maplibregl.Popup().setHTML(...)`
`{ lat, lng }`	`[lng, lat]` — ordre inversé, voir plus bas
`map.setZoom(n)`	`map.setZoom(n)` — identique
`map.setCenter(latLng)`	`map.setCenter([lng, lat])`
Geocoding API	Pas d'équivalent TileCat — voir section 5

3. Le piège n°1 : l'ordre des coordonnées

C'est la source d'erreur la plus fréquente en migration. Google Maps utilise { lat, lng } (latitude d'abord). MapLibre GL JS — comme GeoJSON et la quasi-totalité de l'écosystème géospatial open-source — utilise [longitude, latitude] (longitude d'abord). Inverser les deux silencieusement place tes marqueurs à l'autre bout du monde plutôt que de lever une erreur :

// Google Maps
const position = { lat: 48.8566, lng: 2.3522 };

// MapLibre GL JS — longitude en premier
const position = [2.3522, 48.8566];

4. Exemple complet

// Avant — Google Maps JavaScript API
const map = new google.maps.Map( document.getElementById("map"), {
  center: { lat: 48.8566, lng: 2.3522 },
  zoom: 11,
});

new google.maps.Marker({
  position: { lat: 48.8566, lng: 2.3522 },
  map,
});

// Après — MapLibre GL JS + TileCat
const map = new maplibregl.Map({
  container: "map",
  style: "https://tiles.tilecatcdn.com/styles/default.json?key=YOUR_KEY",
  center: [2.3522, 48.8566],
  zoom: 11,
});

new maplibregl.Marker()
  .setLngLat([2.3522, 48.8566])
  .addTo(map);

5. Ce que TileCat ne remplace pas

TileCat sert des fonds de carte, pas du géocodage ni de la recherche de lieux. Si ton code actuel appelle la Geocoding API ou l'API Places de Google, il te faut une brique séparée après la migration — Nominatim est l'option ouverte la plus proche, basée comme TileCat sur des données OSM, à évaluer selon ton volume. Pas de prétention à tout remplacer d'un coup : migre la carte d'abord, traite le géocodage comme un sujet à part.

6. Attribution

Le plan gratuit TileCat impose une attribution visible sur la carte, comme la plupart des services équivalents. Elle disparaît sur le plan Croissance — voir les tarifs.

Créer une clé gratuite