Customize API request from geocoding control

Use the adjustUrl option when initializing the geocoding control to modify the geocoding URL prior to fetching. This options supersedes the deprecated adjustUrlQuery option. Thanks to this capability you can have full control over how the search control behaves.

In this example, we will use the option to customize the URL specifically for coordinate-based searches (reverse geocoding) to display only results of the address type and limit the output to 3 entries. For other search types, it returns all kinds of elements. For instance, entering 41.394442, 2.156936 in the search box, it will return a list of 3 addresses.

^{Click on the map or type a coordinate in the search box to search for addresses}

Learn more

Discover the process of integrating the geocoding control feature into your React (Geocoding React component) or Svelte (Geocoding Svelte component) applications. Additionally, you have the option to use the VanillaJS version to customize it for any of your applications.

Are you currently using a different map library? No worries! Learn how to incorporate the geocoding control functionality with Leaflet (Leaflet Geocoding control), OpenLayers (OpenLayers Geocoding control), or MapLibre GL JS (MapLibre GL JS Geocoding control).

Related examples

Geocoding API

Example

This tutorial shows how to search places using the MapTiler Geocoding API.

Geocoding limit results by a drawn area

Example

Limit geocode control search results to the bounding box of the drawn area. Draw a polygon on the map to filter the search results to the polygon bounding box.

Geocoding search results by proximity to a specific point

Example

Geocoding control search results closer to the specific geographical point, results near the provided point are ranked higher.

Reverse geocoding uses the user’s location

Example

How to search for places by coordinates (reverse geocoding) using the user's location. Reverse geocoding transforms coordinates into place names.