Algolia Places useDeviceLocation or Default Location

Hi Algolia Community,

I am using Algolia Places API for an Angular 2+ application. I was wondering how you would get the Search Input to populate with the device location on the page where Algolia Places Input is initialized? I tried setting useDeviceLocation option to true but I am really lost at how to implement it.

Thanks

I believe you’re looking at the correct option.
If you look at the example on the documentation page:

var placesAutocomplete = {
  container: document.querySelector('#demo')
};

You can add it like so:

var placesAutocomplete = {
  container: document.querySelector('#demo'),
  useDeviceLocation: true
};

I believe this alone should be enough to make the browser ask to allow sharing your position.

I did try adding the option to the algoliaPlaces Initialization. The browser indeed asks for the device location but I’m pretty clueless as how to retrieve/grab the value then assign it to the value of the input field (to display it on the UI) after retrieving the value.

Any suggestions would be much appreciated.

You don’t need to fill the input with this data, it is automatically passed to the query I believe.
To access the current location retrieved through the browser, I believe you can simply use the navigator Geolocation API https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/Using_geolocation .

I have just got it to work with navigator. The input element will not be filled automatically even if you have the option useDeviceLocation. I had to explicitly call Google Geolocation API to retrieve the location based on the coord from navigator.getCurrentLocation() then assign the input value to the result from the call. Thanks for helping.

1 Like

I am having the exact same problem. It makes no sense: the browser asks for permission to use device location (which I give) but then it does not populate the input box.

Here my simple code, accordingly to documentation:

(function() {
var placesAutocomplete = places({
container: document.querySelector(’#city’),
type: ‘city’,
aroundLatLngViaIP: false,
useDeviceLocation: true,
});
})();

Question 1 - Is something missing in here? (I suspect not, hence the next question:)
Question 2 - Using navigator.geolocation.getCurrentPosition how do you set the found lat and lng to the Algolia’s object?

Thanks

Hi @lmsalgado

We actually experienced the issue on our main landing page, but the issue is random (not tied to a specific browser / version / user). This is what appeared in my console:

17 AM

What I experienced and understand is that it is a bad practice to ask for permission at page load, since it’s showing a blocking popup and break the UX. You can see more details about it here: https://developers.google.com/web/tools/lighthouse/audits/geolocation-on-load

We are actually working on a small change in our lib to enable you to set useDeviceLocation after instantiation (see PR).

For your second question, take a look at: https://community.algolia.com/places/documentation.html#api-options-aroundLatLng

Hope that helps!