Migrate from Google Maps to OpenStreetMap

Technically migrating from the Google Maps JavaScript API to MapLibre GL JS + TileCat is usually a matter of hours, not weeks: both APIs cover the same basic concepts (map, marker, popup), with different syntax. This guide maps them concept by concept.

1. Why migrate

No credit card or Google Cloud billing account to maintain just to keep a key active.
Public, predictable pricing — see the detailed pricing comparison.
OpenStreetMap data: ODbL license, not Google's proprietary terms of service, which restrict certain offline uses or extended caching.

2. Concept mapping

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]` — reversed order, see below
`map.setZoom(n)`	`map.setZoom(n)` — identical
`map.setCenter(latLng)`	`map.setCenter([lng, lat])`
Geocoding API	No TileCat equivalent — see section 5

3. Pitfall #1: coordinate order

This is the most common migration bug. Google Maps uses { lat, lng } (latitude first). MapLibre GL JS — like GeoJSON and nearly the entire open-source geospatial ecosystem — uses [longitude, latitude] (longitude first). Silently swapping the two puts your markers on the other side of the planet instead of throwing an error:

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

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

4. Full example

// Before — 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,
});

// After — 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. What TileCat doesn't replace

TileCat serves basemaps, not geocoding or place search. If your existing code calls Google's Geocoding API or Places API, you'll need a separate piece after the migration — Nominatim is the closest open option, built on OSM data like TileCat, worth evaluating against your volume. No pretense of replacing everything at once: migrate the map first, treat geocoding as its own topic.

6. Attribution

TileCat's free plan requires visible attribution on the map, like most equivalent services. It goes away on the Growth plan — see pricing.

Get a free API key