InstantSearch Guide for Google Places search with map?

[jonathan-bird]

Given that the Algolia Places solution is being sunsetted next year, I need to change this to the recommended Google Places search so that the results from Google Places API can send the Lat/Long information to InstantSearch.

I've got a (rough) demo of the Algolia Places widget working with a draggable map search and results: https://codesandbox.io/s/instantsearch-js-geolocation-sxj9m

I'm not really sure where to start here and since Places was only announced for its removal in Nov 2020, I can't see any guides using this new method.

I read somewhere that I should build my own places.ts widget: https://github.com/algolia/instantsearch.js/blob/dd0ad2ca8f7db5017c90f05dc1cd22bc1f3dcab4/src/widgets/places/places.ts

Can I just use the existing Algolia Places widget with a Google Places API?

Any help appreciated.

[jonathan-bird]

Maybe you might have an idea @Haroenv - I think it was you who posted the places.ts file in one of the threads I read.

I don't know if I'm skilled enough to write my own custom widget that integrates Google places api and InstantSearch geosearch. If you have any examples anywhere, or a guide, or codesandbox, that'd be amazing!

[eunjae-lee]

Hello @jonathan-bird
These are the examples using Google maps (without Algolia places):

• https://codesandbox.io/s/github/algolia/doc-code-samples/tree/master/InstantSearch.js/geo-search-control?file=/src/app.js
• https://codesandbox.io/s/github/algolia/doc-code-samples/tree/master/InstantSearch.js/geo-search-custom-marker?file=/src/app.js
• https://codesandbox.io/s/github/algolia/doc-code-samples/tree/master/InstantSearch.js/geo-search-hits?file=/src/app.js

Let us know if they work for you, or if you have any other question.

[jonathan-bird]

So you know as well @eunjae-lee, that Geo-search-hits demo is buggy as hell. As soon as you set the terrain and drag the map, the pins disappear and then reappear randomly even when in the same bounds (eg just zoom). This bug doesn't happen without terrain being set in mapOptions.

https://codesandbox.io/s/github/algolia/doc-code-samples/tree/master/InstantSearch.js/geo-search-hits?file=/src/app.js

[jonathan-bird]

Looks like it actually happens without mapOptions set too. I use Sydney as a reference, just move it around there and the markers show and hide randomly.

[jonathan-bird]

Thanks for that. Do you have any examples where the search uses Google Places API so that it’s similar to Algolia Places? Basically autocomplete feature so the user can type their address and the map is refined.

…

On Fri, 28 May 2021 at 7:10 pm, Eunjae Lee ***@***.***> wrote: Hello @jonathan-bird <https://github.com/jonathan-bird> These are the examples using Google maps (without Algolia places): - https://codesandbox.io/s/github/algolia/doc-code-samples/tree/master/InstantSearch.js/geo-search-control?file=/src/app.js - https://codesandbox.io/s/github/algolia/doc-code-samples/tree/master/InstantSearch.js/geo-search-custom-marker?file=/src/app.js - https://codesandbox.io/s/github/algolia/doc-code-samples/tree/master/InstantSearch.js/geo-search-hits?file=/src/app.js Let us know if they work for you, or if you have any other question. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#4764 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AALQU4LWPMUYGQ6CVUNH36TTP5MXLANCNFSM45VLZJ2Q> .

[eunjae-lee]

Sorry, not at the moment.

[jonathan-bird]

That would be the closest comparison to Algolia Places if there was. Would it take much to change it?

…

On Sat, 29 May 2021 at 1:00 am, Eunjae Lee ***@***.***> wrote: Sorry, not at the moment. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#4764 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AALQU4KF72QHMFBIWB7RXKDTP6V2BANCNFSM45VLZJ2Q> .

[jonathan-bird]

For anyone wanting an easy (or easier) solution, you can do what AirBnb do and use Google Places to gather the Lat/Lng values from search input, and then.

You can then take those Lat/Lng values and set them in the initial configuration in instantsearch:

search.addWidgets([
  configure({
    hitsPerPage: 8,
    aroundLatLng: '-33.8666, 151.1958' // set as the initial bounds
  }),
])

This is obviously not instant, and is only on initial load, but it's similar to how AirBnb have attacked it since there's is an initial load of the location, and then they use the map to essentially reload markers based on new map bounds, which is what Geo-search does.

This might be an easy enough workaround for the same/similar enough features, without using Algolia Places and having it instant.

[placesapi]

If you only need UK & Ireland data we created PlacesAPI - initially to help our own clients when Algolia Places closes but we've opened it to everyone. It's also built on Algolia so performance is great and migration is easy.