Note that there are some explanatory texts on larger screens.

plurals
  1. POGeolocation on Android with google maps v3 & jQuery Mobile
    text
    copied!<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>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload