Location picker extract values

Question

I have a location picker in my website which works fine so far (code below). I have a JS function that extracts all interesting variables and places them in other elements. When a user clicks a button that calls this function everything works fine, but when I want to call it on load time it does not work as intended.

My location picker (CSS removed):

<div class="col-md-7">
    <h3>Locationpicker</h3>
    <table class="structure_table">
        <tr>
            <td>Location:</td>
            <td><input type="text" form="" id="locationpicker_address" /></td>
        </tr>
        <tr>
            <td>Radius:</td>
            <td><input type="text" form="" id="locationpicker_radius" /></td>
        </tr>
    </table>
    <div id="locationpicker"></div>
    <div>
        Lat: <input type="text" form="" id="locationpicker_lat" readonly />
        Lon: <input type="text" form="" id="locationpicker_lon" readonly />
    </div>
</div>

I initialize this with:

$("#locationpicker").locationpicker({
    location: {latitude: 52.518553, longitude: 13.404635},  
    radius: 200,
    inputBinding:
    {
        latitudeInput: $("#locationpicker_lat"),
        longitudeInput: $("#locationpicker_lon"),
        radiusInput: $("#locationpicker_radius"),
        locationNameInput: $("#locationpicker_address")
    },
    enableAutocomplete: true
});

To extract all interesting information I use this button:

<td><button type="button" onClick="setLocation('start');">Start</button><br /></td>
<td><span id="display_start_location"></span></td>

If I click this button everything works fine but I need to call this function automatically at the beginning. So I added this function call right behind initializing the locationpicker (second code snippet).

setLocation("start");

What this function actually does can be seen here:

function setLocation(option)
{
    var lat = $("#locationpicker_lat").val();
    var lon = $("#locationpicker_lon").val();
    var add = $("#locationpicker_address").val();
    var rad = $("#locationpicker_radius").val();

    if(rad == "")
    {
        rad = 0;
    }

    if(option == "start")
    {
        document.getElementById("start_location_lat").value = lat;
        document.getElementById("start_location_lon").value = lon;
        document.getElementById("start_location_rad").value = rad;

        document.getElementById("display_start_location").innerHTML = add + ", Radius: " + rad + "m";
    }
    else
    {
        document.getElementById("end_location_lat").value = lat;
        document.getElementById("end_location_lon").value = lon;
        document.getElementById("end_location_rad").value = rad;

        document.getElementById("display_end_location").innerHTML = add + ", Radius: " + rad + "m";
    }
}

I expect to see something like this, depending on the coordinates I provide:

Howevere, I always get this:

If I click the button in the pictures manually everything works again. I have really no clue why this behaves as it does. If I need to provide more information please let me know.

Answer 1

$("#locationpicker").locationpicker({
    location: {latitude: 52.518553, longitude: 13.404635},  
    radius: 200,
    inputBinding:
    {
        latitudeInput: $("#locationpicker_lat"),
        longitudeInput: $("#locationpicker_lon"),
        radiusInput: $("#locationpicker_radius"),
        locationNameInput: $("#locationpicker_address")
    },
    oninitialized: function (component) {
        /* component is $('#locationpicker') as far as I can tell
            ...but it doesn't look like you need it */
        setLocation('start');
    },
    enableAutocomplete: true
});

It seems like you've run into a callback issue. The plugin has an oninitialized callback which is fired after the plugin (and therefore the tags like locationpicker_lat) is initialized. Using it to determine when to execute setLocation should fix your issue. Don't forget to remove the call from the top-level of the script so it doesn't run twice.