Source: https://developers.woosmap.com/products/map-api/services/stores-search/

> For clean Markdown of any page, append `.md` to the page URL.

> For a complete documentation index, see https://developers.woosmap.com/llms.txt

# Work with Stores



## Overview

The [`StoresService class`](/products/map-api/reference/1.4/#woosmap.map.StoresService) is a part of the Woosmap Map JavaScript API that allows you to interact with store data. It provides methods for searching stores, autocompleting store names and compute bounds for a stores search request.

Following operations from Stores are supported:

- [Stores Search](/products/stores-api/overview/) lets you search for stores using query.
- [Stores Autocomplete](/products/stores-api/features/autocomplete/) autocomplete on store names.
- [Stores Bounds](/api-reference/search-api/get-stores-search-bounds/) provides bounds for stores search.
- [Store By ID](/api-reference/data-api/get-stores-storeid/) lets you retrieve a store by its unique identifier.

Review the example below to see how to search for stores and display results using the Woosmap Map JS:

https://demo.woosmap.com/js-samples/samples/stores-search/app/dist/
[](https://demo.woosmap.com/js-samples/samples/stores-search/highlight/highlight.html "Open in new tab with highlighted code")
Try sample 

- [CodeSandbox](https://codesandbox.io/p/devbox/github/woosmap/js-samples/tree/master/dist/samples/stores-search/app?file=index.ts)
- [JsFiddle](https://jsfiddle.net/gh/get/library/pure/woosmap/js-samples/tree/master/dist/samples/stores-search/jsfiddle)
- [Clone on Github](https://github.com/Woosmap/js-samples/tree/sample/stores-search)

## Getting started

Before using the Stores Search service in the Map JavaScript API, it is required to have a [secure and valid Woosmap API key](/api-reference/authentication/) and enable the Stores Search API for it.

Next, you must load the Map JS API library by including a script tag in your HTML page as follows:

```html
<script async src="https://sdk.woosmap.com/map/map.js?key=YOUR_API_KEY&callback=initMap"></script>
```

## Stores Search

### Request Stores Search

The `woosmap.map.stores.StoresSearchRequest` is an object literal used when invoking the `StoresService.search()` method from the Woosmap Map JS API. This object sends a request to the Search endpoint of Woosmap Stores API.

Here are the fields included in the `StoresSearchRequest` object:

```plaintext
{
    latLng?: woosmap.map.LatLng | woosmap.map.LatLngLiteral,
    page?: number,
    polyline?: string,
    query?: string,
    radius?: number,
    storesByPage?: number,
    zone?: boolean
}
```

- `latLng` (optional): To bias the results around a specific latitude and longitude.
- `page` (optional): Page number when accessing paginated stores.
- `polyline` (optional): Find stores nearby an encoded polyline and inside a defined radius.
- `query` (optional): Search query combining one or more search clauses. Each search clause is made up of three parts structured as `field : operator value`. Example: `query=name:'My cool store'|type:'click_and_collect'`.
- `radius` (optional): To bias the results within a given circular area. Unit in meters.
- `storesByPage` (optional): If your request returns a high number of stores, the result will be paginated. You can then request stores by page using page and `storesByPage` parameters (Default is 100, max is 300).
- `zone` (optional): Whether to search for stores intersecting a zone.

Below is a sample `StoresSearchRequest` to retrieves a maximum of 15 stores within a 50km radius of the specified location:

```javascript
const storesSearchRequest = {
  latLng: { lat: 43.61, lng: 3.876 },
  radius: 50000,
  storesByPage: 15,
};
```

The `search()` method from `woosmap.map.StoresService` is asynchronous and returns a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) object. This Promise resolves to a `StoresSearchResponse` object upon successful operation.

```javascript
const storesService = new woosmap.map.StoresService();
storesService
  .search(storesSearchRequest)
  .then((response) => {
    console.log(response.features);
  })
  .catch((error) => {
    console.log(error);
  })
  .finally(() => {
    console.log("done");
  });
```

The `StoresSearchResponse` is a GeoJSON of type “FeatureCollection”. For more information on the stores format, see the [StoresSearchResponse](/products/map-api/reference/1.4/#woosmap.map.stores.StoresSearchResponse) on the reference.

### Display Stores Search Results

To display the stores returned by the `search()` method, you can add [Markers](/products/map-api/guides/markers/) or use the [`Map Data Layer`](/products/map-api/guides/render-shapes/#data-layer). Data layer has the advantage of being able to display GeoJSON source. Here is an example of how to display stores using this layer:

```javascript
const myMap = new woosmap.map.Map(document.getElementById("map"));

myMap.data.setStyle((feature) => {
  return { icon: "https://images.woosmap.com/dot-marker.png" };
});

const storesService = new woosmap.map.StoresService();
function handleStoresSearch(latlng, originalLatLng) {
  const searchRequest = {
    storesByPage: 15,
    latLng: latlng,
  };
  storesService.search(searchRequest).then(displayStoresSearchResults).catch(handleError);
}

function displayStoresSearchResults(stores) {
  myMap.data.addGeoJson(stores);
}
```