Geolocation on Android with google maps v3 & jQuery Mobile

Question

I followed this tutorial http://www.mobiledevelopersolutions.com/home/start/twominutetutorials/tmt4part1 and i have one problem. The geolocation doesn't work on the default Android browser. It does work on Chrome, IE and Chrome for Android. But not the default Android browser.

I think i have to put { enableHighAccuracy: true } somewhere put i can't get it figured out.

This is the code:

var mapdata = { destination: new google.maps.LatLng(51.3704888, 6.1723862) };

// Home page
$('#page-home').live("pageinit", function() {
    $('#map_square').gmap(
        { 'center' : mapdata.destination, 
          'zoom' : 12, 
          'mapTypeControl' : false, 
          'navigationControl' : false,
          'streetViewControl' : false 
        })
        .bind('init', function(evt, map) { 
            $('#map_square').gmap('addMarker', 
                { 'position': map.getCenter(), 
                  'animation' : google.maps.Animation.DROP
 });                                                                                                                                                                                                               
        });
    $('#map_square').click( function() { 
        $.mobile.changePage($('#page-map'), {});
    });
});

function fadingMsg (locMsg) {
    $("<div class='ui-overlay-shadow ui-body-e ui-corner-all fading-msg'>" + locMsg + "</div>")
    .css({ "display": "block", "opacity": 0.9, "top": $(window).scrollTop() + 100 })
    .appendTo( $.mobile.pageContainer )
    .delay( 2200 )
    .fadeOut( 1000, function(){
        $(this).remove();
   });
}

//Create the map then make 'displayDirections' request
$('#page-map').live("pageinit", function() {
    $('#map_canvas').gmap({'center' : mapdata.destination, 
        'mapTypeControl' : true, 
        'navigationControl' : true,
        'navigationControlOptions' : {'position':google.maps.ControlPosition.LEFT_TOP}
        })
    .bind('init', function() {
        $('.refresh').trigger('tap');        
    });
});

$('#page-map').live("pageshow", function() {
    $('#map_canvas').gmap('refresh');
});

// Request display of directions, requires jquery.ui.map.services.js
var toggleval = true; // used for test case: static locations
$('.refresh').live("tap", function() {


             // START: Tracking location with device geolocation
    if ( navigator.geolocation ) { 
        fadingMsg('Using device geolocation to get current position.');


        navigator.geolocation.getCurrentPosition  ( 
            function(position )  {
                $('#map_canvas').gmap('displayDirections', 
                { 'origin' : new google.maps.LatLng(position.coords.latitude, position.coords.longitude), 
                  'destination' : mapdata.destination, 'travelMode' : google.maps.DirectionsTravelMode.DRIVING},
                { 'panel' : document.getElementById('dir_panel')},
                      function (result, status) {
                          if (status === 'OK') {
                              var center = result.routes[0].bounds.getCenter();
                              $('#map_canvas').gmap('option', 'center', center);
                              $('#map_canvas').gmap('refresh')
                          } else {
                              alert('Unable to get route');
                          }
                      }
                   );         
                }, 
                function(){ 
                    alert('Unable to get location');
                    $.mobile.changePage($('#page-home'), {   }); 

                }); 
            } else {
                alert('Unable to get location.');
            }           
    // END: Tracking location with device geolocation
    $(this).removeClass($.mobile.activeBtnClass);
    return false;
});


// Go to map page to see instruction detail (zoom) on map page
$('#dir_panel').live("tap", function() {
    $.mobile.changePage($('#page-map'), {});
});

// Briefly show hint on using instruction tap/zoom
$('#page-dir').live("pageshow", function() {
    fadingMsg("Tap any instruction<br/>to see details on map");
});

Thx for the help!

Jo Dar Gaya Woh Mar Gaya · Accepted Answer · 2012-05-03T12:59:52.520

This is how you may need to call.

navigator.geolocation.getCurrentPosition(successCallback,
                                         errorCallback,
                                         {maximumAge:Infinity, timeout:0, enableHighAccuracy: true });

Ofcourse here you can change maximumAge and timeout values, but this is where you set enableHighAccuracy. So just specify this as third param in your getcurrentposition method.

EDIT :

    navigator.geolocation.getCurrentPosition  ( 
        function(position )  {
            $('#map_canvas').gmap('displayDirections', 
            { 'origin' : new google.maps.LatLng(position.coords.latitude, position.coords.longitude), 
              'destination' : mapdata.destination, 'travelMode' : google.maps.DirectionsTravelMode.DRIVING},
            { 'panel' : document.getElementById('dir_panel')},
                  function (result, status) {
                      if (status === 'OK') {
                          var center = result.routes[0].bounds.getCenter();
                          $('#map_canvas').gmap('option', 'center', center);
                          $('#map_canvas').gmap('refresh')
                      } else {
                          alert('Unable to get route');
                      }
                  }
               );         
            }, 
            function(){ 
                alert('Unable to get location');
                $.mobile.changePage($('#page-home'), {   }); 

            }, 
    { enableHighAccuracy: true } );

I am trying to put it on different places but i can't get it to work. Could you point the exact location in my code where i have to put it? Thank you! — , May 03 '12 at 10:34
When i put it on that place it does not work, but it also stops working in IE and Chrome. — , May 03 '12 at 11:25
:D {maximumAge:Infinity, timeout:0, enableHighAccuracy: true } does not work {enableHighAccuracy: true } ); Works! Thank you for the help. — , May 03 '12 at 11:33
change {maximumAge:Infinity, timeout:0, enableHighAccuracy: true } to {enableHighAccuracy: true } in your answer and i will mark as answer! — , May 03 '12 at 12:53

score -1 · Answer 2 · answered Mar 16 '13 at 02:36

-1

Since you want to use geolocation, have you set the sensor to true? Because if you set it false, it won't work.

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>

answered Mar 16 '13 at 02:36

Qiqi Abaziz

3,363
3
16
12

The sensor parameter does not affect results in any way. It is just FYI for Google: http://stackoverflow.com/questions/8616764/what-is-the-sensor-parameter-in-google-places-api-good-for – Mika Tuupola May 21 '13 at 11:34

Geolocation on Android with google maps v3 & jQuery Mobile

2 Answers2