How to add Geocoding control to OpenLayers map

In this tutorial, you will learn how to add a geocoding control to a OpenLayers map. Geocoding control will enable map users to search places in the map.

Let’s start with a minimalistic HTML page that displays a fullscreen map. Replace YOUR_MAPTILER_API_KEY_HERE with your actual MapTiler API key.

<!DOCTYPE html>  
<html>  
<head>  
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />  
<title>MapTiler Geocoding OpenLayers</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v10.1.0/ol.css">
<script src="https://cdn.jsdelivr.net/npm/ol@v10.1.0/dist/ol.js"></script>   
<style>  
#map {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}  
</style>  
</head>  
<body>  
<div id="map">  
<a href="https://www.maptiler.com" style="position:absolute;left:10px;bottom:10px;z-index:999;"><img src="https://api.maptiler.com/resources/logo.svg" alt="MapTiler logo"></a>  
</div>  
<script>  
const key = 'YOUR_MAPTILER_API_KEY_HERE';  
  
const attribution = new ol.control.Attribution({  
collapsible: false,  
});  
  
const source = new ol.source.TileJSON({  
url: `https://api.maptiler.com/maps/streets-v2/tiles.json?key=${key}`, // source URL  
tileSize: 512,  
crossOrigin: 'anonymous'  
});  
  
const map = new ol.Map({  
layers: [  
new ol.layer.Tile({  
source: source  
})  
],  
controls: ol.control.defaults.defaults({attribution: false}).extend([attribution]),  
target: 'map',  
view: new ol.View({  
constrainResolution: true,  
center: ol.proj.fromLonLat([16.62662018, 49.2125578]), // starting position [lng, lat]  
zoom: 14 // starting zoom  
})  
});  
</script>  
</body>  
</html>

Next, we will include the geocoder control script and styles. Add the following snippet to <head> element:

<script src="https://cdn.maptiler.com/maptiler-geocoding-control/v1.3.3/openlayers.umd.js"></script>
<link href="https://cdn.maptiler.com/maptiler-geocoding-control/v1.3.3/style.css" rel="stylesheet">

Finally, we will instantiate the geocoding control and add it to the map. Add the following snippet after the Leaflet map instantiation code:

const gc = new openlayersMaptilerGeocoder.GeocodingControl({  
apiKey: key,  
});  
map.addControl(gc);

You may then adjust the GeocodingControl CSS style:

.ol-search {  
position: absolute;  
right: 0.5em;  
top: 0.5em;  
}

Control can be additionally customized with various options which are documented on its project page.

Complete source code

Here just copy the sample source code and paste it into your HTML file (your key is included).
Or just copy the code below and replace YOUR_MAPTILER_API_KEY_HERE it with your actual MapTiler API key.

<!DOCTYPE html>  
<html>  
<head>  
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />  
<title>MapTiler Geocoding OpenLayers</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v10.1.0/ol.css">
<script src="https://cdn.jsdelivr.net/npm/ol@v10.1.0/dist/ol.js"></script>   
<style>  
#map {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
.ol-search {  
position: absolute;  
right: 0.5em;  
top: 0.5em;  
}  
</style>  
</head>  
<body>  
<div id="map">  
<a href="https://www.maptiler.com" style="position:absolute;left:10px;bottom:10px;z-index:999;"><img src="https://api.maptiler.com/resources/logo.svg" alt="MapTiler logo"></a>  
</div>  
<script>  
const key = 'YOUR_MAPTILER_API_KEY_HERE';  
  
const attribution = new ol.control.Attribution({  
collapsible: false,  
});  
  
const source = new ol.source.TileJSON({  
url: `https://api.maptiler.com/maps/streets-v2/tiles.json?key=${key}`, // source URL  
tileSize: 512,  
crossOrigin: 'anonymous'  
});  
  
const map = new ol.Map({  
layers: [  
new ol.layer.Tile({  
source: source  
})  
],  
controls: ol.control.defaults.defaults({attribution: false}).extend([attribution]),  
target: 'map',  
view: new ol.View({  
constrainResolution: true,  
center: ol.proj.fromLonLat([16.62662018, 49.2125578]), // starting position [lng, lat]  
zoom: 14 // starting zoom  
})  
});

const gc = new openlayersMaptilerGeocoder.GeocodingControl({  
apiKey: key,  
});  
  
map.addControl(gc);  
</script>  
</body>  
</html>

Geocoding on-prem with MapTiler Server

You can utilize the geocoding capabilities within your on-prem installation of MapTiler Server. This feature allows you to search for addresses and locations without an internet connection. Please have a look at the  MapTiler Server API documentation for a comprehensive understanding of all the available options the geocoding API  provides.