title: Location picker extract values
body: <p>I have a <a href="http://logicify.github.io/jquery-locationpicker-plugin/" rel="nofollow noreferrer">location picker</a> 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.</p>
  
  <p>My location picker (CSS removed):</p>
  
  <pre><code>&lt;div class="col-md-7"&gt;
      &lt;h3&gt;Locationpicker&lt;/h3&gt;
      &lt;table class="structure_table"&gt;
          &lt;tr&gt;
              &lt;td&gt;Location:&lt;/td&gt;
              &lt;td&gt;&lt;input type="text" form="" id="locationpicker_address" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Radius:&lt;/td&gt;
              &lt;td&gt;&lt;input type="text" form="" id="locationpicker_radius" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
      &lt;div id="locationpicker"&gt;&lt;/div&gt;
      &lt;div&gt;
          Lat: &lt;input type="text" form="" id="locationpicker_lat" readonly /&gt;
          Lon: &lt;input type="text" form="" id="locationpicker_lon" readonly /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I initialize this with:</p>
  
  <pre><code>$("#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
  });
  </code></pre>
  
  <p>To extract all interesting information I use this button:</p>
  
  <pre><code>&lt;td&gt;&lt;button type="button" onClick="setLocation('start');"&gt;Start&lt;/button&gt;&lt;br /&gt;&lt;/td&gt;
  &lt;td&gt;&lt;span id="display_start_location"&gt;&lt;/span&gt;&lt;/td&gt;
  </code></pre>
  
  <p>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).</p>
  
  <pre><code>setLocation("start");
  </code></pre>
  
  <p>What this function actually does can be seen here:</p>
  
  <pre><code>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";
      }
  }
  </code></pre>
  
  <p>I expect to see something like this, depending on the coordinates I provide:</p>
  
  <p><a href="https://i.stack.imgur.com/1Ermp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1Ermp.png" alt="Expected result"></a></p>
  
  <p>Howevere, I always get this:</p>
  
  <p><a href="https://i.stack.imgur.com/4zdAM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4zdAM.png" alt="Result on page load"></a></p>
  
  <p>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.</p>