Global var giving undefined

Question

Tried passing values from my function to my global var but I keep getting undefined. How do I fix this?

var waypoint = [];
var lat;
var lon;


function getLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition);

        }
    }

//show current position
function showPosition(position) {
    marker = new L.Marker([position.coords.latitude, position.coords.longitude], { bounceOnAdd: false }).addTo(map);
    window.lat = position.coords.latitude;
    window.lon = position.coords.longitude;
}

waypoint.push([lat, lon]);
alert(lat + 'and' + lon); //getting undefined here

//show start and end markers
$(document).ready(function () {
    getLocation();
    plotMarkers();
});

Show position is called from getLocation() which is called during document.ready