Geocoding control (search box)

The MapTiler Geocoding control module is the main feature of our Search & Geocoding services. It implements a search box in your maps or online forms, so that users of your application can find any place on Earth down to individual addresses. Try it out:

The search has many features and config options, for example, you can add autocomplete, limit the results to a specific country or another defined area, highlight the search results on the map, and much more.

The Geocoding control module uses our Geocoding API.

How to use

The Geocoding control can be used as an ES module or UMD module. You can implement it with MapTiler SDK JS or other map libraries of your choice. We also provide React and Svelte components.

Get started

First, get a MapTiler API key. Then copy the following code and use your key where indicated:




API reference



This reference documents every object and method available. Each section describes classes or objects as well as their properties, parameters, methods, and associated events. Many sections also include inline code examples and related resources.




    




UMD global variables



If you import script from CDN using <script src="https://cdn.maptiler.com/maptiler-geocoding-control/v${version}/${Script filename}"></script> then it creates a global variable according to the following table:




  
    

      Script filename
      UMD global variable name
      Exports
    

  
  
    

      leaflet.umd.js
      leafletMaptilerGeocoder
      class GeocodingControl,function createLeafletMapController
    

    

      maplibregl.umd.js
      maplibreglMaptilerGeocoder
      class GeocodingControl, function createMapLibreGlMapController
    

    

      maptilersdk.umd.js
      maptilersdkMaptilerGeocoder
      class GeocodingControl, function createMapLibreGlMapController
    

    

      openlayers.umd.js
      openlayersMaptilerGeocoder
      class GeocodingControl, function createOpenLayersMapController
    

    

      react.umd.js
      reactMaptilerGeocoder
      class GeocodingControl
    

    

      vanilla.umd.js
      maptilerGeocoder
      class GeocodingControl
    

    

      leaflet-controller.umd.js
      leafletMaptilerGeocodingController
      function createLeafletMapController
    

    

      maplibregl-controller.umd.js
      maplibreglMaptilerGeocodingController
      function createMapLibreGlMapController
    

    

      openlayers-controller.umd.js
      openlayersMaptilerGeocodingController
      function createOpenLayersMapController
    

  




The variable is an object with properties representing library-exported variables, for example maplibreglMaptilerGeocoder.GeocodingControl.




  
    
    
  • alternatively you can use different CDN, for example https://www.unpkg.com/@maptiler/geocoding-control@${version}/${Script filename}
    • 
    
  • replace `${version}` with the desired library version and ${Script filename} with the script filename from the table above.
    • 
  





POI icons and bundlers



POI icons are served from CDN per default. If there is an requirement to serve them from a different location and the control is used in the application which is build with Web Application bundler (like Webpack or Vite) then it is necessary to do some extra configuration. Icons are bundled in the library and you can find them in node_modules/@maptiler/geocoding-control/icons. Configure your bundler and/or provide iconsBaseUrl option for the icons to be properly resolved. You can also copy icons from that directory to your public directory.





Related examples




  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

      
        
          
          Place search with Geocoding API
        
        
Geocoding API

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

      
    

  
  

      
        
          
          How to search places by coordinates (reverse geocoding)
        
        
Reverse geocoding

        Tutorial
        
This tutorial shows how to search places by coordinates (reverse geocoding).

      
    

  
  

      
        
          
          Geocoding control how to search places
        
        
Geocoding control

        Tutorial
        
This tutorial shows how to search for places using the geocoding control.

      
    

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

      
        
          
          Customize API request from geocoding control
        
        
Customize API request (geocoding control)

        Example
        
Use the adjustUrl option in the geocoding control constructor to modify the geocoding URL before the fetch. This capability enables complete control over the search control's functionality.

      
    

      
        
          
          Geocoding limit results by a drawn area
        
        
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 limit results by area (bounding box)
        
        
Geocoding limit results by area

        Example
        
Limit the search results of the geocoding control to the specific area (bounding box).

      
    

      
        
          
          Geocoding search for POIs near the user's location
        
        
Geocoding search for POIs near the user's location

        Example
        
Geocoding control search results filter by type and given higher priority for the results near the user's location.

      
    

      
        
          
          Geocoding search results closer to specific point
        
        
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.

      
    

      
        
          
          Geocoding search results to specified country(ies)
        
        
Geocoding search results to specified country(ies)

        Example
        
Geocoding control limit search results to specified country(ies).

      
    

      
        
          
          How to specify the geocoding control language(s) response text and prioritization
        
        
Geocoding language

        Example
        
Specify the geocoding control language(s) that are used for the response text and weighting of the query results.

      
    

      
        
          
          Reverse geocoding uses the user’s location to search for places
        
        
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.

      
    

      
        
          
          Search features by coordinates using the geocoding control
        
        
Geocoding control (reverse geocoding)

        Example
        
Support coordinate-based searches (reverse geocoding) using the geocoding control.