failed to get input value by id
<p>I have this code, that detect the longitude and latitude, it managed to put into input but I'm not able to retrieve the input value, please help me find what is the issue. I tried jquery, it can't retrieve either.</p>

<p>Here is my code:-</p>

<pre><code>    var startPos;
      navigator.geolocation.getCurrentPosition(function(position) {
        startPos = position;
        $('#pokemon_lat').val(startPos.coords.latitude); 
        $('#pokemon_long').val(startPos.coords.longitude);

      }, function(error) {
        alert('Error occurred. Error code: ' + error.code + '');
        // error.code can be:
        //   0: unknown error
        //   1: permission denied
        //   2: position unavailable (error response from locaton provider)
        //   3: timed out
      });

$(function($) {
    // Asynchronously Load the map API 
    var script = document.createElement('script');
    script.src = "//maps.googleapis.com/maps/api/js?key=shcschds&amp;sensor=true&amp;callback=initialize";
    document.body.appendChild(script);
});

function initialize() {
    var map;
    var bounds = new google.maps.LatLngBounds();
    var mapOptions = {
        mapTypeId: 'roadmap'
    };

    // Display a map on the page
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    map.setTilt(45);

    // Multiple Markers LatLong
    var lat = document.getElementById("pokemon_lat").value;
    var longi = document.getElementById("pokemon_long").value;

        console.log('Lat:'+lat+' Long:'+longi);

}
</code></pre>