Migrate from Google Maps

Moving from the Google Maps JavaScript API to MapLibre GL JS with the Maptoolkit community tiles means swapping a proprietary, key-based service for an open library and a keyless vector basemap. The concepts map closely; the main differences are coordinate order and the object names.

Key differences

Google Maps JS	MapLibre GL JS
`new google.maps.Map(el, opts)`	`new maplibregl.Map({ container, style, … })`
`{ lat, lng }` objects	`[lng, lat]` arrays (longitude first)
`new google.maps.Marker`	`new maplibregl.Marker`
`new google.maps.InfoWindow`	`new maplibregl.Popup`
`map.setCenter` / `map.setZoom`	`map.setCenter` / `map.setZoom`
`map.addListener('click', …)`	`map.on('click', …)`
API key required	No key for community tiles

1. Replace the script

<!-- Before: Google Maps JS -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_KEY"></script>

<!-- After: MapLibre GL JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/maplibre-gl.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/maplibre-gl.css" rel="stylesheet" />

2. Create the map

// Before (Google Maps)
const map = new google.maps.Map(document.getElementById('map'), {
  center: { lat: 52.52, lng: 13.405 },
  zoom: 11,
});

// After (MapLibre + Maptoolkit)
const map = new maplibregl.Map({
  container: 'map',
  style: 'https://styles.maptoolkit.org/summer.json',
  center: [13.405, 52.52], // [lng, lat]
  zoom: 11,
});

3. Markers and info windows

// Before (Google Maps)
const marker = new google.maps.Marker({ position: { lat: 52.52, lng: 13.405 }, map });
const info = new google.maps.InfoWindow({ content: '<strong>Berlin</strong>' });
marker.addListener('click', () => info.open(map, marker));

// After (MapLibre + Maptoolkit)
const popup = new maplibregl.Popup().setHTML('<strong>Berlin</strong>');
new maplibregl.Marker().setLngLat([13.405, 52.52]).setPopup(popup).addTo(map);

4. Things to check

Coordinate order. Google uses { lat, lng }; MapLibre uses [lng, lat]. Swap every coordinate.
No API key. Remove the Google key and any billing setup; the community tiles need no key.
Controls and overlays. Replace Google UI controls with MapLibre equivalents (NavigationControl, ScaleControl) and draw data with GeoJSON sources and layers. See the MapLibre examples.

Attribution

Migrate from Mapbox GL JS Migrate from the Mapbox Mobile SDK