InstantSearch specs

✏️ edit page

GeoSearch

Widget example

HTML output

<div class="ais-GeoSearch">
  <div class="ais-GeoSearch-map">
    <!-- Map element here -->
  </div>
  <div class="ais-GeoSearch-control">
    <label class="ais-GeoSearch-label">
      <input class="ais-GeoSearch-input" type="checkbox">
      Search as I move the map
    </label>
  </div>
  <button class="ais-GeoSearch-reset">
    Clear the map refinement
  </button>
</div>

CSS classes

Hint: hover classes below to see their position.

name description
.ais-GeoSearch the root div of the widget
.ais-GeoSearch-map the map container of the widget
.ais-GeoSearch-control the control element of the widget
.ais-GeoSearch-label the label of the control element
.ais-GeoSearch-label--selected the selected label of the control element
.ais-GeoSearch-input the input of the control element
.ais-GeoSearch-redo the redo search button
.ais-GeoSearch-redo--disabled the disabled redo search button
.ais-GeoSearch-reset the reset refinement button

Options

Note: this is a guideline for new InstantSearch flavours, not a rule.

name default value description
initialZoom 1 Zoom of the map when no results are found
initialPosition { lat:0, lng:0 } Position of the map when no results are found
paddingBoundingBox { top:0, right:0, bottom:0, left:0 } Add an inner padding on the map when you refine
mapOptions {} Option forwarded to the Google Maps constructor
enableClearMapRefinement true Button displayed on the map when the refinement is coming from the map in order to remove it
enableRefineControl true The user can toggle the option `enableRefineOnMapMove` directly from the map
enableRefineOnMapMove true Refine will be triggered as you move the map
enableGeolocationWithIP true The IP will be use for the location, when `position` is provided this option is ignored
position Position that will be use to search around
radius Maximum radius to search around the position
precision Precision of geo search
transformItems Function which receives the items, which will be called before displaying them. Should return a new array with the same shape as the original array. Useful for mapping over the items to transform, remove or reorder them

Translations

Note: this is a guideline for new InstantSearch flavours, not a rule.

name default value description
resetButtonText Clear the map refinement The text of the "Clear the map refinement" button.
redoButtonText Redo search here The text of the button that's displayed when the map was moved.
refineOnMoveToggleLabel Search as I move the map The label of the toggle to refine on move.