JS Геолокация не работает хорошо

Question

Я объявил переменные lat и long как переменные, я пытаюсь передать их в другую функцию, но результат пустой ... Не могу не подумать, что допустил ошибку где-то в javascript.Я думаю, что HTML-это хорошо, включая теги.Они названы и идентифицированы правильно.

<p id="one"></p>

<button onclick="locate()">Push Me!!!</button>
<div id="mapholder"></div>
<script>
var x = document.getElementById("one");
function locate() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition, showError);
    } else {
        x.innerHTML = "Your browser is stupid";
    }
}
function showPosition(position) {
    x.innerHTML = "Latitude: " + position.coords.latitude +
    "<br>Longitude: " + position.coords.longitude;
    var lat = position.coords.latitude;
    var long = position.coords.longitude;
    var mapOptions = {
        center: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.HYBRID
    }
    var map = new google.maps.Map(document.getElementById("mapholder"), mapOptions);
    alert(map);
}
function myMap() {
    var mapOptions = {
        center: new google.maps.LatLng(lat, long),
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.HYBRID
    }
var map = new google.maps.Map(document.getElementById("mapholder"), mapOptions);
} 

function showError(error){
    switch(error.code) {
        case error.PERMISSION_DENIED:
            x.innerHTML = "User denied the request for Geolocation."
            break;
        case error.POSITION_UNAVAILABLE:
            x.innerHTML = "Location information is unavailable."
            break;
        case error.TIMEOUT:
            x.innerHTML = "The request to get user location timed out."
            break;
        case error.UNKNOWN_ERROR:
            x.innerHTML = "An unknown error occurred."
            break;
    }
}
</script>