Place search with Geocoding API

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

You have the option to access the Geocoding API through various means, such as the command line, your backend application, a spreadsheet, or seamlessly integrate it into your websites using the Geocoding control feature.

^{The map shows as a red dot the first search result for “Austin”.}

1. Copy the following code, paste it into your favorite text editor, and save it as a .html file.

2. Install the npm package.

3. Include the CSS file.

   If you have a bundler that can handle CSS, you can import the CSS or include it with a <link> in the head of the document via the CDN

4. Include the following code in your JavaScript file (Example: app.js).

5. Replace YOUR_MAPTILER_API_KEY_HERE with your actual MapTiler API key.

6. The next is up to you. You can center your map wherever you desire (modifying the starting position) and set an appropriate zoom level (modifying the starting zoom) to match your users’ needs. Additionally, you can change the map’s look (by updating the source URL); choose from a range of visually appealing map styles from our extensive MapTiler standard maps, or create your own to truly differentiate your application.

7. Get the query string of the map URL.

8. Create the map layer where we will display the search results.

9. Check if the search parameter called q exists. If it exists, call the forward geocoding function with the value of the parameter q.

10. Show the results on the map and zoom in on the first result.

Learn more

Check out the tutorials on How to search places using the geocoder component and How to search places by coordinates (reverse geocoding).

Visit the MapTiler Geocoding API reference for all search options. For example specifying the language of the results, etc.

If you want to learn how to display the search results in a list, check out the Reverse Geocoding tutorial (point 6 onwards).

Related examples

Geocoding limit results by area

Example

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

Geocoding language

Example

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

Reverse geocoding

Example

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

Geocoding control

Example

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