Address Search with MapLibre GL JS

MapLibre GL JS

Search for places by name using the MapTiler Geocoding API and display results on a MapLibre GL JS map.

progress_activityLoading map...

const map = new maplibregl.Map({
  container: 'map',
  style: 'https://api.maptiler.com/maps/streets-v4/style.json?key=YOUR_MAPTILER_KEY',
  center: [14.42, 50.08],
  zoom: 5
});
let marker, timeout;
const input = document.getElementById('search-box');
const results = document.getElementById('results');
input.addEventListener('input', () => {
  clearTimeout(timeout);
  const q = input.value.trim();
  if (q.length < 3) { results.style.display = 'none'; return; }
  timeout = setTimeout(async () => {
    const res = await fetch('https://api.maptiler.com/geocoding/' + encodeURIComponent(q) + '.json?key=YOUR_MAPTILER_KEY&limit=5');
    const data = await res.json();
    results.innerHTML = '';
    results.style.display = data.features.length ? 'block' : 'none';
    data.features.forEach(f => {
      const div = document.createElement('div');
      div.textContent = f.place_name;
      div.onclick = () => {
        const [lng, lat] = f.center;
        if (marker) marker.remove();
        marker = new maplibregl.Marker({ color: '#2196F3' })
          .setLngLat([lng, lat])
          .setPopup(new maplibregl.Popup().setHTML('<b>' + f.place_name + '</b>'))
          .addTo(map);
        marker.togglePopup();
        map.flyTo({ center: [lng, lat], zoom: 14 });
        results.style.display = 'none';
        input.value = f.place_name;
      };
      results.appendChild(div);
    });
  }, 300);
});

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl@6.11.2/dist/maplibre-gl.css" />
<style>
body { margin: 0; padding: 0; }
#map { width: 100%; height: 100vh; }
#search-box { position: absolute; top: 10px; left: 10px; z-index: 1; padding: 8px 12px; font-size: 12px; font-family: monospace; background: #141414; color: #e0e0e0; border: 2px solid #2a2a2a; width: 280px; }
#results { position: absolute; top: 42px; left: 10px; z-index: 1; background: #141414; border: 2px solid #2a2a2a; border-top: none; width: 280px; max-height: 200px; overflow-y: auto; display: none; }
#results div { padding: 8px 12px; cursor: pointer; font-size: 11px; font-family: monospace; color: #c0c0c0; border-bottom: 1px solid #1e1e1e; }
#results div:hover { background: #1a1a1a; color: #e0e0e0; }

</style>
</head>
<body>
<div id="map"></div>
<input id="search-box" type="text" placeholder="Search address..." />
<div id="results"></div>

<script type="module">
import * as maplibregl from 'https://unpkg.com/maplibre-gl@6.11.2/dist/maplibre-gl.mjs';

const map = new maplibregl.Map({
  container: 'map',
  style: 'https://api.maptiler.com/maps/streets-v4/style.json?key=YOUR_MAPTILER_KEY',
  center: [14.42, 50.08],
  zoom: 5
});
let marker, timeout;
const input = document.getElementById('search-box');
const results = document.getElementById('results');
input.addEventListener('input', () => {
  clearTimeout(timeout);
  const q = input.value.trim();
  if (q.length < 3) { results.style.display = 'none'; return; }
  timeout = setTimeout(async () => {
    const res = await fetch('https://api.maptiler.com/geocoding/' + encodeURIComponent(q) + '.json?key=YOUR_MAPTILER_KEY&limit=5');
    const data = await res.json();
    results.innerHTML = '';
    results.style.display = data.features.length ? 'block' : 'none';
    data.features.forEach(f => {
      const div = document.createElement('div');
      div.textContent = f.place_name;
      div.onclick = () => {
        const [lng, lat] = f.center;
        if (marker) marker.remove();
        marker = new maplibregl.Marker({ color: '#2196F3' })
          .setLngLat([lng, lat])
          .setPopup(new maplibregl.Popup().setHTML('<b>' + f.place_name + '</b>'))
          .addTo(map);
        marker.togglePopup();
        map.flyTo({ center: [lng, lat], zoom: 14 });
        results.style.display = 'none';
        input.value = f.place_name;
      };
      results.appendChild(div);
    });
  }, 300);
});

</script>
</body>
</html>

import maplibregl from 'maplibre-gl';
import 'maplibre-gl/dist/maplibre-gl.css';

const map = new maplibregl.Map({
  container: 'map',
  style: 'https://api.maptiler.com/maps/streets-v4/style.json?key=YOUR_MAPTILER_KEY',
  center: [14.42, 50.08],
  zoom: 5
});
let marker, timeout;
const input = document.getElementById('search-box');
const results = document.getElementById('results');
input.addEventListener('input', () => {
  clearTimeout(timeout);
  const q = input.value.trim();
  if (q.length < 3) { results.style.display = 'none'; return; }
  timeout = setTimeout(async () => {
    const res = await fetch('https://api.maptiler.com/geocoding/' + encodeURIComponent(q) + '.json?key=YOUR_MAPTILER_KEY&limit=5');
    const data = await res.json();
    results.innerHTML = '';
    results.style.display = data.features.length ? 'block' : 'none';
    data.features.forEach(f => {
      const div = document.createElement('div');
      div.textContent = f.place_name;
      div.onclick = () => {
        const [lng, lat] = f.center;
        if (marker) marker.remove();
        marker = new maplibregl.Marker({ color: '#2196F3' })
          .setLngLat([lng, lat])
          .setPopup(new maplibregl.Popup().setHTML('<b>' + f.place_name + '</b>'))
          .addTo(map);
        marker.togglePopup();
        map.flyTo({ center: [lng, lat], zoom: 14 });
        results.style.display = 'none';
        input.value = f.place_name;
      };
      results.appendChild(div);
    });
  }, 300);
});

How it works

The MapTiler Geocoding API converts place names into geographic coordinates. As the user types (minimum 3 characters), a debounced request fires after 300ms of inactivity and populates a dropdown with up to 5 matching results.

Each result includes center coordinates in [lng, lat] order and a place_name (formatted address). Clicking a result places a blue marker with a popup and flies the map to zoom level 14. The dropdown hides and the input updates with the selected place name.

Key APIs

API	Description	Docs
MapTiler Geocoding API	Forward geocoding endpoint	docs.maptiler.com
`map.fitBounds()`	Frame a bounding box on screen	maplibre.org docs
`map.flyTo()`	Animated transition to a point	maplibre.org docs

FAQ

Can I bias results to a specific region?

Yes. Add proximity=lng,lat to bias toward a location, or bbox=minLng,minLat,maxLng,maxLat to restrict results to a bounding box.

How do I filter result types?

Add &types=country,place,address,poi to the geocoding URL to limit results to specific categories.

Common mistakes

Not URL-encoding the query string: use encodeURIComponent() for special characters
Forgetting to check data.features.length before accessing results: empty results cause errors
Using [lat, lng] with setLngLat(): MapTiler returns coordinates in [lng, lat] order

auto_awesome

Build maps using MapLibre GL JS with AI

Generate code like this address search with maplibre gl js example using the MapLibre GL JS skill in your IDE.

auto_awesomeGet skills keyGet a free API key

Related Examples

Reverse Geocoding with MapLibre GL JS
Initialize a MapLibre GL JS Map
See how to do this in Leaflet, MapTiler SDK or OpenLayers