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. Version 6 ships as ES modules only, so there is no
     script tag and no global - you import it where you use it. -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/maplibre-gl.css" rel="stylesheet" />
<script type="module">
  import * as maplibregl from 'https://cdn.jsdelivr.net/npm/[email protected]/dist/maplibre-gl.mjs';
</script>

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

// Arabic/Hebrew: MapLibre has no right-to-left support built in, this plugin adds it
maplibregl.setRTLTextPlugin('https://cdn.jsdelivr.net/npm/@mapbox/[email protected]/dist/mapbox-gl-rtl-text.js', false);

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

Every map must show the Maptoolkit logo and the © Maptoolkit © Openstreetmap copyright line. See Quick Start - Add attribution.

Migrate from Mapbox GL JS Migrate from the Mapbox Mobile SDK