Integrating the Latest Version of Algolia InstantSearch with Google Maps

Integrating Algolia's InstantSearch with Google Maps can provide powerful search functionality combined with geographical visualization. This guide will walk you through the steps needed to set up this integration using React.

1. Install Package Dependencies

First, you need to install the required packages. Run the following command to install @vis.gl/react-google-maps,algoliasearch, and react-instantsearch.

npm install @vis.gl/react-google-maps algoliasearch react-instantsearch

2. Set Up Google Maps

Next, set up Google Maps in your React application. Use the following code to display a map centered at a specific position:

import { APIProvider, Map } from '@vis.gl/react-google-maps';
function App() {
  const position = { lat: 53.54992, lng: 10.00678 };
  return (
    <APIProvider apiKey={'YOUR API KEY HERE'}>
      <Map defaultCenter={position} defaultZoom={10}>
      </Map>
    </APIProvider>
  );
}
export default App;

3. Capture Map Bounds for Algolia Filtering

To filter Algolia search results based on the map’s visible area, capture the north-east and south-west coordinates whenever the map bounds change:

import { useState } from 'react';
import { APIProvider, Map } from '@vis.gl/react-google-maps';

function App() {
  const [state, setState] = useState(null);
  const [boundChanged, setBoundChanged] = useState(false);
  const position = { lat: 53.54992, lng: 10.00678 };

  return (
    <APIProvider apiKey={"YOUR API KEY HERE"}>
      <Map
        defaultCenter={position}
        defaultZoom={12}
        mapId={"6e120bcd575d29f7"}
        disableDefaultUI={true}
        onBoundsChanged={(data) => {
          const bounds = data.map.getBounds();
          setState({
            northEast: bounds.getNorthEast().toJSON(),
            southWest: bounds.getSouthWest().toJSON(),
          });
          setBoundChanged(true);
        }}
      ></Map>
    </APIProvider>
  );
}

export default App;

4. Add InstantSearch

Integrate Algolia InstantSearch into your application and set up the search client:

import { useState } from 'react';
import algoliasearch from 'algoliasearch';
import { InstantSearch } from 'react-instantsearch-dom';
import { APIProvider, Map } from '@vis.gl/react-google-maps';

const searchClient = algoliasearch(
  'ALGOLIA_APP_ID',
  'ALGOLIA_SEARCH_API_KEY'
);

function App() {
  const [state, setState] = useState(null);
  const [boundChanged, setBoundChanged] = useState(false);
  const position = { lat: 53.54992, lng: 10.00678 };

  return (
    <InstantSearch
      searchClient={searchClient}
      indexName={"indexName"}
      routing={true}
      future={{
        persistHierarchicalRootCount: true,
        preserveSharedStateOnUnmount: true,
      }}
    >
      <APIProvider apiKey={"YOUR API KEY HERE"}>
        <Map
          defaultCenter={position}
          defaultZoom={12}
          mapId={"6e120bcd575d29f7"}
          disableDefaultUI={true}
          onBoundsChanged={(data) => {
            const bounds = data.map.getBounds();
            setState({
              northEast: bounds.getNorthEast().toJSON(),
              southWest: bounds.getSouthWest().toJSON(),
            });
            setBoundChanged(true);
          }}
        >
        </Map>
      </APIProvider>
    </InstantSearch>
  );
}

export default App;

5. Fetch Items from Algolia

Finally, fetch items from Algolia and display them as markers on the map:

import { useState } from 'react';
import algoliasearch from 'algoliasearch';
import { InstantSearch, useGeoSearch } from 'react-instantsearch-dom';
import { APIProvider, Map } from '@vis.gl/react-google-maps';

const searchClient = algoliasearch(
  'ALGOLIA_APP_ID',
  'ALGOLIA_SEARCH_API_KEY'
);

function App() {
  const [state, setState] = useState(null);
  const [boundChanged, setBoundChanged] = useState(false);
  const position = { lat: 53.54992, lng: 10.00678 };
  const { items, refine } = useGeoSearch();

  return (
    <InstantSearch
      searchClient={searchClient}
      indexName={"indexName"}
      routing={true}
      future={{
        persistHierarchicalRootCount: true,
        preserveSharedStateOnUnmount: true,
      }}
    >
      <APIProvider apiKey={"YOUR API KEY HERE"}>
        <Map
          defaultCenter={position}
          defaultZoom={12}
          mapId={"6e120bcd575d29f7"}
          disableDefaultUI={true}
          onBoundsChanged={(data) => {
            const bounds = data.map.getBounds();
            setState({
              northEast: bounds.getNorthEast().toJSON(),
              southWest: bounds.getSouthWest().toJSON(),
            });
            setBoundChanged(true);
          }}
        >
          {items.map(single => {
            return single.map(position => {
              return (
                position && (
                  <Marker
                    position={position}
                  />
                )
              );
            });
          })}
        </Map>
      </APIProvider>
    </InstantSearch>
  );
}

export default App;

With these steps, you've successfully integrated Algolia InstantSearch with Google Maps in your React application. This setup will allow users to see search results visually on a map, enhancing their overall experience.