We've moved discussions to Discord

Alternative service for address lookup/autocomplete

Tim Dowling
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
        });

        
    }

}
Tim Dowling
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.
© 2022 Jumpstart Pro by GoRails, LLC