---
title: "Geocoding: Show place search results | Geocoding | JavaScript maps SDK"
description: "Search for places using the MapTiler Geocoding API."
---
> For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL.
# Geocoding: Show place search results
This tutorial shows how you can use place search using the [MapTiler Geocoding API](https://www.maptiler.com/cloud/geocoding/). The resultant map application takes a search query from the URL and displays the search results on the map, zooming in on the first result.
The map shows as a red dot the first search result for **“Austin”**.
## NPM module setup
1. Install the npm package.
```bash
npm install --save @maptiler/sdk
```
2. Include the CSS file.
If you have a bundler that can handle CSS, you can `import` the CSS
```js
import "@maptiler/sdk/dist/maptiler-sdk.css";
```
or include it with a `` in the head of the document via the CDN
```html
```
3. Include the following code in your JavaScript file (Example: app.js).
```js
import * as maptilersdk from '@maptiler/sdk';
maptilersdk.config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
const map = new maptilersdk.Map({
container: 'map', // container's id or the HTML element to render the map
style: maptilersdk.MapStyle.STREETS,
center: [-97.7485, 30.2711], // starting position [lng, lat]
zoom: 11.7, // starting zoom
});
```
4. Replace `YOUR_MAPTILER_API_KEY_HERE` with [your own API key](https://cloud.maptiler.com/account/keys/). Make sure to [secure the key](https://docs.maptiler.com/guides/developer/credentials/api-key/#secure-key) before you publish it.
5. 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](https://cloud.maptiler.com/maps/), or create your own to truly differentiate your application.
6. Get the query string of the map URL.
```js
const urlParams = new URLSearchParams(window.location.search);
```
7. Create the map layer where we will display the search results.
```js
map.on('load', async () => {
map.addSource('search-results', {
type: 'geojson',
data: {
"type": "FeatureCollection",
"features": []
}
});
map.addLayer({
'id': 'point-result',
'type': 'circle',
'source': 'search-results',
'paint': {
'circle-radius': 8,
'circle-color': '#B42222',
'circle-opacity': 0.5
},
'filter': ['==', '$type', 'Point']
});
});
```
8. Check if the search parameter called `q` exists. If it exists, call the forward geocoding function with the value of the parameter `q`.
```js
if (urlParams.get('q')) {
const results = await maptilersdk.geocoding.forward(urlParams.get('q'));
}
```
9. Show the results on the map and zoom in on the first result.
```js
if (urlParams.get('q')) {
const results = await searchPlace(urlParams.get('q'), key);
map.getSource('search-results').setData(results);
if (results.features[0]) {
map.fitBounds(results.features[0].bbox, {maxZoom: 19})
}
}
```
## Basic JavaScript setup
1. Copy the following code, paste it into your favorite text editor, and save it as a `.html` file.
```html
Search a placename
```
2. Replace `YOUR_MAPTILER_API_KEY_HERE` with [your own API key](https://cloud.maptiler.com/account/keys/). Make sure to [secure the key](https://docs.maptiler.com/guides/developer/credentials/api-key/#secure-key) before you publish it.
3. 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](https://cloud.maptiler.com/maps/), or create your own to truly differentiate your application.
4. Get the query string of the map URL.
```js
const urlParams = new URLSearchParams(window.location.search);
```
5. Create the map layer where we will display the search results.
```js
map.on('load', async () => {
map.addSource('search-results', {
type: 'geojson',
data: {
"type": "FeatureCollection",
"features": []
}
});
map.addLayer({
'id': 'point-result',
'type': 'circle',
'source': 'search-results',
'paint': {
'circle-radius': 8,
'circle-color': '#B42222',
'circle-opacity': 0.5
},
'filter': ['==', '$type', 'Point']
});
});
```
6. Check if the search parameter called `q` exists. If it exists, call the forward geocoding function with the value of the parameter `q`.
```js
if (urlParams.get('q')) {
const results = await maptilersdk.geocoding.forward(urlParams.get('q'));
}
```
7. Show the results on the map and zoom in on the first result.
```js
if (urlParams.get('q')) {
const results = await searchPlace(urlParams.get('q'), key);
map.getSource('search-results').setData(results);
if (results.features[0]) {
map.fitBounds(results.features[0].bbox, {maxZoom: 19})
}
}
```
### Complete source code
```html
Search a placename
```
## Learn more
Check out the tutorials on [How to search places using the geocoder component](../geocoder-component/) and [How to search places by coordinates (reverse geocoding)](../reverse-geocoding/).
Visit the [MapTiler Geocoding API reference](https://docs.maptiler.com/cloud/api/geocoding/) 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](../reverse-geocoding/) tutorial (point 6 onwards).
## Related examples
### [Geocoding control](https://docs.maptiler.com/sdk-js/examples/geocoder-component/)
Tutorials
Search for places using the map geocoding control component.
### [Reverse geocoding](https://docs.maptiler.com/sdk-js/examples/reverse-geocoding/)
Tutorials
Search places by coordinates using reverse geocoding.
### [Geocoding language](https://docs.maptiler.com/sdk-js/examples/geocoding-language/)
Examples
Specify languages for geocoding response text and query weighting.
### [Geocoding limit results by area](https://docs.maptiler.com/sdk-js/examples/geocoding-filter-bbox/)
Examples
Limit geocoding search results to a specific bounding box area.