title: Geolocation on Android with google maps v3 & jQuery Mobile
body: <p>I followed this tutorial <a href="http://www.mobiledevelopersolutions.com/home/start/twominutetutorials/tmt4part1" rel="nofollow">http://www.mobiledevelopersolutions.com/home/start/twominutetutorials/tmt4part1</a> 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.</p>
  
  <p>I think i have to put { enableHighAccuracy: true } somewhere put i can't get it figured out.</p>
  
  <p>This is the code: </p>
  
  <pre><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) {
      $("&lt;div class='ui-overlay-shadow ui-body-e ui-corner-all fading-msg'&gt;" + locMsg + "&lt;/div&gt;")
      .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&lt;br/&gt;to see details on map");
  });
  </code></pre>
  
  <p>Thx for the help!</p>