Loading...

JavaScript - Location (Native)

Location search using the Browser's native Datalist element. Try it

Example

Install from NPM or CDN

npm install getaddress-location-native

<script src="https://cdn.getaddress.io/scripts/getaddress-location-native-1.0.2.min.js"></script>

Usage

<input id="textbox_id" type="text"> 

<label>Postcode</label>
<input id="postcode" type="text">

<label>Outcode</label>
<input id="outcode" type="text">

<label>Area</label>
<input id="area" type="text">

<label>Town or City</label>
<input id="town_or_city" type="text">

<label>County</label>
<input id="county" type="text">

<label>Country</label>
<input id="country" type="text">

<label>Latitude</label>
<input id="latitude" type="text">

<label>Longitude</label>
<input id="longitude" type="text">

<script>
    getAddress.location(
        'textbox_id',
        'API Key or Domain Token' 
    );
</script>

Events

document.addEventListener("getaddress-location-native-suggestions", function(e){
    console.log(e.suggestions);
})

document.addEventListener("getaddress-location-native-suggestions-failed", function(e){
    console.log(e.status);
    console.log(e.message);
})

document.addEventListener("getaddress-location-native-selected", function(e){
    console.log(e.address);
})

document.addEventListener("getaddress-location-native-selected-failed", function(e){
    console.log(e.status);
    console.log(e.message);
})

Options

getAddress.location(
    'textbox_id',
    'API Key',
    /*options*/{
        output_fields:{
            latitude:'latitude',  /* The id of the element bound to 'latitude' */
            longitude:'longitude',  /* The id of the element bound to 'longitude' */
            area:'area',  /* The id of the element bound to 'area' */
            town_or_city:'town_or_city',  /* The id of the element bound to 'town_or_city' */
            county:'county',  /* The id of the element bound to 'county' */
            country:'country',  /* The id of the element bound to 'country' */
            postcode:'postcode',  /* The id of the element bound to 'postcode' */
            outcode:'outcode'  /* The id of the element bound to 'outcode' */
        },
        id_prefix:'getAddress-location-native' ,  /* The id of the textbox and list container */
        delay:200, /* millisecond delay between keypress and API call */
        minimum_characters:2,  /* minimum characters to initiate an API call */
        select_on_focus:true,  /* if true, highlights textbox characters on focus*/
        alt_location_url:undefined,  /* alterative local location URL (when API key is not used) */
        alt_get_location_url:undefined,  /* alterative local get URL (when API key is not used) */
        suggestion_count:6, /* number of retreived suggestions (max 20) */
        filter:undefined, /* the suggestion filter (see Location API)*/
        bind_output_fields:true, /* if true, bind the output_fields to the address*/
        input_focus_on_select:true,  /* if true, sets the focus to the textbox after selecting an address*/
        debug:false, /* if true, logs behavior */
        enable_get_location:true /* if true, retreives a location on select */
    }
);

Domain Tokens

To avoid exposing your API key in browser code, Domain Tokens can used in place of your API key.
Domain Tokens can be generated for a specific domain and it's sub-domains. They can also limit the number of look-ups per minute for an IP address. 

<script>
    getAddress.location
    (
        'textbox_id',
        'dtoken_hEDzcyiWMI1eXXXX'
    );
</script>
Top