Skip to main content

Documentation Index

Fetch the complete documentation index at: https://algolia.com/llms.txt

Use this file to discover all available pages before exploring further.

This is the React InstantSearch v7 documentation. If you’re upgrading from v6, see the upgrade guide. If you were using React InstantSearch Hooks, this v7 documentation applies—just check for necessary changes. To continue using v6, you can find the archived documentation.

​
About this Hook

The geoSearch hook lets you search for results based on their position within a specified area (a bounding box). It also provides features such as “search on map interactions”.
The geoSearch hook doesn’t let you search around a central point or within polygons. If you want this, you need to build your own UI on top of the Algolia API.

Open CodeSandbox

Run and edit the useGeoSearch example in CodeSandbox.

​
Example: React Leaflet

import { useGeoSearch } from "react-instantsearch";
import {
  MapContainer,
  Marker,
  Popup,
  TileLayer,
  useMapEvents,
} from "react-leaflet";

export function CustomGeoSearch(props) {
  const { items, refine } = useGeoSearch(props);

  function onViewChange({ target }) {
    refine({
      northEast: target.getBounds().getNorthEast(),
      southWest: target.getBounds().getSouthWest(),
    });
  }

  useMapEvents({ zoomend: onViewChange, dragend: onViewChange });

  return (
    <MapContainer
      center={[48.85, 2.35]}
      zoom={10}
      minZoom={4}
      scrollWheelZoom={true}
    >
      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      {items.map((item) => (
        <Marker key={item.objectID} position={item._geoloc}>
          <Popup>
            <strong>{item.name}</strong>
            <br />
            {item.city}, {item.country}
          </Popup>
        </Marker>
      ))}
    </MapContainer>
  );
}
Last modified on March 12, 2026