Alternative service for address lookup/autocomplete
Hi all, I've recently added address lookup to my app and didn't want the google logo in my app so i came across https://www.geoapify.com/ which i used with a simple stimulus controller. A great option if you need to add simple address lookup and it has a very generous free tier. Controller example below if anyone is interested - i added some hidden fields to populate the address in the form:
import { Controller } from "stimulus";
import { GeocoderAutocomplete } from '@geoapify/geocoder-autocomplete';
export default class extends Controller {
static targets = [ "geocoder", "housenumber", "street",
"country", "county", "city", "state", "postcode", "lat", "long" ]
initialize() {
this.initAddressLookup();
}
initAddressLookup() {
const autocomplete = new GeocoderAutocomplete(
document.getElementById("autocomplete"),
'YOUR API KEY HERE',
{
});
autocomplete.addFilterByCountry(['au']);
autocomplete.on('select', (location) => {
console.log('location', location)
this.housenumberTarget.value = location.properties.housenumber
this.streetTarget.value = location.properties.street
this.countryTarget.value = location.properties.country
this.countyTarget.value = location.properties.county
this.cityTarget.value = location.properties.city
this.latTarget.value = location.properties.lat
this.longTarget.value = location.properties.lon
this.stateTarget.value = location.properties.state
this.postcodeTarget.value = location.properties.postcode
});
autocomplete.on('suggestions', (suggestions) => {
// process suggestions here
});
}
}
Notifications
You’re not receiving notifications from this thread.