Can't get variable value

Question

I'm working on this javascript code for geolocation. I don't understand why it doesn't pickup the value of my variable that are declared globally.

How can I pass the "lat and "lng" variable correctly? What am i missing?

var lat; //Works if I set value manually
var lng;

if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
} else {
    x.innerHTML = "Geolocation is not supported by this browser.";
}

function showPosition(position) {
    lat = position.coords.latitude; //Doesn't pick up this value
    lng = position.coords.longitude; //Doesn't pick up this value

    document.getElementById('demo').innerHTML = lat; //Value is correct
    document.getElementById('demo2').innerHTML = lng; //Value is correct

}     

var map;
var marker;
var myLatlng = new google.maps.LatLng(lat,lng); //Works if I add value manually
var geocoder = new google.maps.Geocoder();
var infowindow = new google.maps.InfoWindow();
function initialize(){
    var mapOptions = {
        zoom: 18,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById("myMapSearch"), mapOptions);

    marker = new google.maps.Marker({
        map: map,
        position: myLatlng,
        draggable: true 
    });     

    geocoder.geocode({'latLng': myLatlng }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            if (results[0]) {
                $('#address').val(results[0].formatted_address);
                $('#latitude').val(marker.getPosition().lat());
                $('#longitude').val(marker.getPosition().lng());
                infowindow.setContent(results[0].formatted_address);
                infowindow.open(map, marker);
            }
        }
    });


    google.maps.event.addListener(marker, 'dragend', function() {
        geocoder.geocode({'latLng': marker.getPosition()}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                if (results[0]) {
                    $('#address').val(results[0].formatted_address);
                    $('#latitude').val(marker.getPosition().lat());
                    $('#longitude').val(marker.getPosition().lng());
                    infowindow.setContent(results[0].formatted_address);
                    infowindow.open(map, marker);
                }
            }
        });
    });

}

google.maps.event.addDomListener(window, 'load', initialize);

score 2 · Accepted Answer · answered Jul 31 '14 at 14:48

2

navigator.geolocation.getCurrentPosition is asynchronous. The function you pass to it doesn't get called until the the data is available, in the meantime the rest of your JS runs as normal.

Do what you need to do with the data from the callback function instead of immediately after sending the request for the geopositioning data.

answered Jul 31 '14 at 14:48

Quentin

914,110
126
1,211
1,335

Ok that makes sens, but it looks like my google map code doesn't work within the callback function. Is there a way I can get back the value of lat and lng from the callback? Otherwise what would be the solution to get the position automatically? Cheers for the help anyway :) – user2068020 Aug 01 '14 at 11:27

Can't get variable value

1 Answers1