Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

I'm getting the users location on a mobile device and sending it to a database, I then run a jquery function to plot pointers on a map.

However the map always seems to load before i update the users location meaning that the location is the one that was set previously.

getGeoLocation is the function that updates the database with the correct location, but it only ever runs after the jquery function. can't seem to get around this... how can i make the map load only after the call is made?

<script>
$(document).ready(function(){

    getGeoLocation();

    alert('map');

    var result = JSON.parse('<?php usersWithinRadius(); ?>');

    $('#map').gmap3({
        marker:
        {                   
            values: result,
        },
        map:
        {
          options:
          {
            zoom:12,
            mapTypeControl: false,
            navigationControl: true,
            streetViewControl: false
          }

      }

    });

});   
</script>

And this is the code that the getGeoLocation refers to:

//Initialize geolocation
function getGeoLocation() 
{       

    if(navigator.geolocation) 
    {

        navigator.geolocation.getCurrentPosition(
            recordGeoLocation, 
            geoLocationErrorHandler, {
                enableHighAccuracy: true,
                timeout: 20000,
                maximumAge: 120000
            }
        );

        return true;

    }
    else 
    {

        alert('Geolocation not supported');

        return false;

    }

}

//Map position retrieved successfully
function recordGeoLocation(position) 
{

    var data = new Object();

    data.latitude = position.coords.latitude;
    data.longitude = position.coords.longitude;

    /** Other data
    data.altitude = position.coords.altitude;
    data.accuracy = position.coords.accuracy;
    data.altitudeAccuracy = position.coords.altitudeAccuracy;
    data.heading = position.coords.heading;
    data.speed = position.coords.speed;
    **/

    recordUserGeoLocation(data.latitude, data.longitude);

}

//Send the latitude and longitude to database
function recordUserGeoLocation(latitude, longitude)
{

    var BASE_URL = $('#BASE_URL').val();

    var ajaxURL = BASE_URL + 'ajax/recordUserGeoLocation/';

    $.ajax({
        type: 'POST',
        url: ajaxURL,
        data: { 
            latitude: latitude,
            longitude: longitude
        },
        dataType: 'json',
        success: function(data){

            //The record has been added
            console.log('Recorded location: ' + latitude + ' , ' + longitude);

            alert('Recorded location: ' + latitude + ' , ' + longitude);

        }
    });

}

//Error handler
function geoLocationErrorHandler(err) 
{

    var message;

    switch(err.code) 
    {
        case 0:
            message = 'Unknown error: ' + err.message;
            break;
        case 1:
            message = 'You denied permission to retrieve a position.';
            break;
        case 2:
            message = 'The browser was unable to determine a position: ' + error.message;
            break;
        case 3:
            message = 'The browser timed out before retrieving the position.';
            break;
    }

    alert(message);

}
share|improve this question
Post your getGeoLocation() function as well. You will need to use the callback google gives you once it gets the location i believe. – techfoobar Apr 11 at 16:08
Added, the code for updating the location is not from google, it using inbuilt browser geo location. – André Figueira Apr 11 at 16:11

3 Answers

up vote 1 down vote accepted

You can put the rest of your code in $(document).ready() inside a function and call it at the end of the success function in your recordUserGeoLocation() function.

// code to execute after you get the geo location
function initMaps() {
   var result = JSON.parse('<?php usersWithinRadius(); ?>');
   $('#map').gmap3({
      ...
   }
}

function recordUserGeoLocation(latitude, longitude) {
   ...
   $.ajax({
      ...
      success: function(data) {
         ...
         initMaps(); // now that all is done, call it
      }
   });
   ...
}

$(document).ready(function(){
    getGeoLocation(); // call just this from ready
});
share|improve this answer
I just realised what the issue is, it's because I'm loading the pointers on server side before any of the javascript runs, I need to run: usersWithinRadius via ajax to fix the problem, thanks for the help anyway! – André Figueira Apr 11 at 16:15
With your answer and the fact i had to load the php fixed it, thanks for the help. – André Figueira Apr 11 at 16:28

There is a "callback" property in gmap3. If I am understanding you correctly, you need to place the getGeoLocation function call within the callback so the map information will be available. For example:

$(function() {
    $('#map').gmap3({
        marker:
        {                   
            values: result,
        },
        map:
        {
          options:
          {
            zoom:12,
            mapTypeControl: false,
            navigationControl: true,
            streetViewControl: false
        },
        callback: function() {
            getGeoLocation()
        }
    });
});
share|improve this answer

I just realised what the issue is, it's because I'm loading the pointers on server side before any of the javascript runs, I need to run: usersWithinRadius via ajax to fix the problem, thanks for the help anyway!

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.