Address Search with OpenLayers

OpenLayers

Search for places using the MapTiler Geocoding API and display results on an OpenLayers map.

progress_activityLoading map...

var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({ source: new ol.source.XYZ({ url: 'https://api.maptiler.com/maps/streets-v4/256/{z}/{x}/{y}.png?key=YOUR_MAPTILER_KEY', attributions: '&copy; <a href="https://www.maptiler.com/copyright/">MapTiler</a>' }) })
  ],
  view: new ol.View({ center: ol.proj.fromLonLat([2.3522, 48.8566]), zoom: 5 })
});
var marker = new ol.layer.Vector({ source: new ol.source.Vector(), style: new ol.style.Style({ image: new ol.style.Circle({ radius: 8, fill: new ol.style.Fill({ color: '#e63946' }), stroke: new ol.style.Stroke({ color: '#fff', width: 2 }) }) }) });
map.addLayer(marker);
var input = document.getElementById('search-input');
var resultsDiv = document.getElementById('results');
input.addEventListener('input', function() {
  var q = input.value.trim();
  if (q.length < 3) { resultsDiv.style.display = 'none'; return; }
  fetch('https://api.maptiler.com/geocoding/' + encodeURIComponent(q) + '.json?key=YOUR_MAPTILER_KEY')
    .then(function(r) { return r.json(); })
    .then(function(data) {
      resultsDiv.innerHTML = '';
      resultsDiv.style.display = data.features.length ? 'block' : 'none';
      data.features.forEach(function(f) {
        var div = document.createElement('div');
        div.textContent = f.place_name;
        div.style.cssText = 'padding:8px 12px;cursor:pointer;border-bottom:1px solid #eee;';
        div.onclick = function() {
          marker.getSource().clear();
          marker.getSource().addFeature(new ol.Feature({ geometry: new ol.geom.Point(ol.proj.fromLonLat(f.center)) }));
          map.getView().animate({ center: ol.proj.fromLonLat(f.center), zoom: 14 });
          resultsDiv.style.display = 'none';
          input.value = f.place_name;
        };
        resultsDiv.appendChild(div);
      });
    });
});

<!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/ol@10.10.0/ol.css" />
<script src="https://unpkg.com/ol@10.10.0/dist/ol.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { width: 100%; height: 100vh; }
</style>
</head>
<body>
<div id="map"></div>
<div style="position:absolute;top:10px;left:10px;z-index:1;">
  <input id="search-input" type="text" placeholder="Search a place..." style="padding:6px 12px;width:260px;background:#141414;color:#e0e0e0;border:2px solid #2a2a2a;font-family:monospace;font-size:12px;">
  <div id="results" style="background:#141414;color:#e0e0e0;max-height:200px;overflow-y:auto;border:2px solid #2a2a2a;border-top:none;display:none;font-family:monospace;font-size:12px;"></div>
</div>

<script>
var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({ source: new ol.source.XYZ({ url: 'https://api.maptiler.com/maps/streets-v4/256/{z}/{x}/{y}.png?key=YOUR_MAPTILER_KEY', attributions: '&copy; <a href="https://www.maptiler.com/copyright/">MapTiler</a>' }) })
  ],
  view: new ol.View({ center: ol.proj.fromLonLat([2.3522, 48.8566]), zoom: 5 })
});
var marker = new ol.layer.Vector({ source: new ol.source.Vector(), style: new ol.style.Style({ image: new ol.style.Circle({ radius: 8, fill: new ol.style.Fill({ color: '#e63946' }), stroke: new ol.style.Stroke({ color: '#fff', width: 2 }) }) }) });
map.addLayer(marker);
var input = document.getElementById('search-input');
var resultsDiv = document.getElementById('results');
input.addEventListener('input', function() {
  var q = input.value.trim();
  if (q.length < 3) { resultsDiv.style.display = 'none'; return; }
  fetch('https://api.maptiler.com/geocoding/' + encodeURIComponent(q) + '.json?key=YOUR_MAPTILER_KEY')
    .then(function(r) { return r.json(); })
    .then(function(data) {
      resultsDiv.innerHTML = '';
      resultsDiv.style.display = data.features.length ? 'block' : 'none';
      data.features.forEach(function(f) {
        var div = document.createElement('div');
        div.textContent = f.place_name;
        div.style.cssText = 'padding:8px 12px;cursor:pointer;border-bottom:1px solid #eee;';
        div.onclick = function() {
          marker.getSource().clear();
          marker.getSource().addFeature(new ol.Feature({ geometry: new ol.geom.Point(ol.proj.fromLonLat(f.center)) }));
          map.getView().animate({ center: ol.proj.fromLonLat(f.center), zoom: 14 });
          resultsDiv.style.display = 'none';
          input.value = f.place_name;
        };
        resultsDiv.appendChild(div);
      });
    });
});

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

import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import { fromLonLat } from 'ol/proj';
import 'ol/ol.css';

var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({ source: new ol.source.XYZ({ url: 'https://api.maptiler.com/maps/streets-v4/256/{z}/{x}/{y}.png?key=YOUR_MAPTILER_KEY', attributions: '&copy; <a href="https://www.maptiler.com/copyright/">MapTiler</a>' }) })
  ],
  view: new ol.View({ center: ol.proj.fromLonLat([2.3522, 48.8566]), zoom: 5 })
});
var marker = new ol.layer.Vector({ source: new ol.source.Vector(), style: new ol.style.Style({ image: new ol.style.Circle({ radius: 8, fill: new ol.style.Fill({ color: '#e63946' }), stroke: new ol.style.Stroke({ color: '#fff', width: 2 }) }) }) });
map.addLayer(marker);
var input = document.getElementById('search-input');
var resultsDiv = document.getElementById('results');
input.addEventListener('input', function() {
  var q = input.value.trim();
  if (q.length < 3) { resultsDiv.style.display = 'none'; return; }
  fetch('https://api.maptiler.com/geocoding/' + encodeURIComponent(q) + '.json?key=YOUR_MAPTILER_KEY')
    .then(function(r) { return r.json(); })
    .then(function(data) {
      resultsDiv.innerHTML = '';
      resultsDiv.style.display = data.features.length ? 'block' : 'none';
      data.features.forEach(function(f) {
        var div = document.createElement('div');
        div.textContent = f.place_name;
        div.style.cssText = 'padding:8px 12px;cursor:pointer;border-bottom:1px solid #eee;';
        div.onclick = function() {
          marker.getSource().clear();
          marker.getSource().addFeature(new ol.Feature({ geometry: new ol.geom.Point(ol.proj.fromLonLat(f.center)) }));
          map.getView().animate({ center: ol.proj.fromLonLat(f.center), zoom: 14 });
          resultsDiv.style.display = 'none';
          input.value = f.place_name;
        };
        resultsDiv.appendChild(div);
      });
    });
});

How it works

The MapTiler Geocoding API converts text queries into geographic coordinates. This example sends the search input to the API endpoint and displays matching results in a dropdown.

When a result is selected, a marker is placed at the location and the map animates to center on it. The API returns GeoJSON features with center coordinates in [lng, lat] format, which are converted using ol.proj.fromLonLat().

The search triggers after 3 characters to reduce unnecessary API calls.

Key APIs

API	Description	Docs
MapTiler Geocoding API	Forward geocode text to coordinates	docs.maptiler.com
`map.getView().animate()`	Animate map view changes	openlayers.org
`ol.source.Vector.addFeature()`	Add a feature to the vector source	openlayers.org

FAQ

How do I limit results to a specific country?

Add &country=FR (ISO 3166-1 alpha-2 code) to the API URL to filter results by country.

Is there a rate limit on the Geocoding API?

Yes. Check your MapTiler plan for rate limits. For production, add debouncing (300-500ms delay) to the input handler.

Common mistakes

Not encoding the search query with encodeURIComponent(): special characters will break the URL
Forgetting to clear previous markers before adding new ones
Not converting f.center with ol.proj.fromLonLat() before using it in OpenLayers

auto_awesome

Build maps using OpenLayers with AI

Generate code like this address search with openlayers example using the OpenLayers skill in your IDE.

auto_awesomeGet skills keyGet a free API key

Related Examples

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