Having difficulty displaying and centering map with user's location using W3C GeoLocation API

Question

I'm using the following script and having difficulty passing in the lat and lon variables I created with user's location. When I remove the lat and lon variables I created and manually put in 0,0 it works fine for debugging's sake...The map should be displayed in a div with id of map_canvas.

$(document).ready(function() {
navigator.geolocation.getCurrentPosition(handle_geolocation_query,handle_errors);  
var lat = position.coords.latitude;
var lon = position.coords.longitude;
var latlng = new google.maps.LatLng(lat, lon);
    var myOptions = {
    zoom: 1,
    center: latlng,
    disableDefaultUI: true,
    mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
    myOptions); map.setTilt(45); 
});

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); can be changed to var map = new google.maps.Map($("#map_canvas"), myOptions); — Semyazas, Jul 28 '11 at 07:03

score 1 · Accepted Answer · answered Jul 28 '11 at 07:18

Your problem is probably right here:

navigator.geolocation.getCurrentPosition(handle_geolocation_query, handle_errors);

Presumably, handle_geolocation_query looks something like this:

var position;
function handle_geolocation_query(pos) {
    position = pos;
}

But navigator.geolocation.getCurrentPosition is an asynchronous function call:

The getCurrentPosition() method takes one, two or three arguments. When called, it must immediately return and then asynchronously attempt to obtain the current location of the device. If the attempt is successful, the successCallback must be invoked [...]

Emphasis mine.

So, your handle_geolocation_query callback will be called by getCurrentPosition when it has the position, not when you call getCurrentPosition. So, when you get to here:

var lat = position.coords.latitude;
var lon = position.coords.longitude;

Your position won't necessarily contain anything useful and you probably get an error telling you that position.coords is undefined or not an object or something similar.

You need to move your new google.maps.LatLng and new google.maps.Map stuff to inside the handle_geolocation_query callback where you'll have a useful position value.

score 1 · Answer 2 · answered Aug 02 '11 at 16:01

http://j.maxmind.com/app/geoip.js

http://maps.google.com/maps/api/js?sensor=true

 var ulat;
 var ulon;
 var map;

         if (navigator.geolocation)  {



       navigator.geolocation.getCurrentPosition(handle_geolocation_query,handle_errors);

            }

            else if (!navigator.geolocation)

            {  
             max();  
            } 
             else
            { 
             alert("Sorry user location can't be detected");
              initialize();   
            }   



//maxmind api for fallback
        function max()  
        { 
              ulat=geoip_latitude();
              ulon=geoip_longitude();

            initialize();
        }  


        function handle_errors(error)  
        {  
            switch(error.code)  
            {  
                case error.PERMISSION_DENIED: alert("user did not share geolocation data");  
                break;  

                case error.POSITION_UNAVAILABLE: alert("could not detect current position");  
                break;  

                case error.TIMEOUT: alert("retrieving position timed out");  
                break;  

                default: alert("unknown error");  
                break;  
            } 
        initialize();    
        } 

        function handle_geolocation_query(position){ 

        ulat=position.coords.latitude;
        ulon=position.coords.longitude;
      /* alert('Lat: ' + position.coords.latitude +  
                  ' Lon: ' + position.coords.longitude); */ 

        initialize();
        } 


     function initialize(){
     loc = new Array();
     geocoder = new google.maps.Geocoder();
      var latlng = new google.maps.LatLng(ulat,ulon);
       var myOptions = {
       zoom: 3,
       center: latlng,
       mapTypeId: google.maps.MapTypeId.ROADMAP
        };
     map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);



}//end of initialize

Hi, geolocation is asynchronus by nature hence don't use it with synchronus function ,otherwise u may get null value for new google.maps.LatLng(lat, lon) function. try the above code according to your requirement.you can work similarly in jquery.

Having difficulty displaying and centering map with user's location using W3C GeoLocation API

2 Answers2