| Option | Default | Description |
|---|---|---|
| enableHighAccuracy | False, not enabled | (Optional) A boolean value that tells the browser that if true, you desire the most accurate location the device may be able to provide. |
| maximumAge | 0, any age allowed | (Optional) The maximum age of the location position returned in milliseconds since a browser may cache the last location to conserve battery power. |
| timeout | 0, no timeout | (Optional) The maximum time, in milliseconds, to allow for a location position to be returned by the browser. |
getCurrentPosition with Position Options
<!DOCTYPE html> <html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>10.3 Points To</title> <style> #container { /*ww w . j a v a 2 s . c om*/ width:500px; } #mapCanvas { width:500px; height:300px; border-style:solid; border-width:2px; margin: 22px 0; } #location { float:right; text-align:right; } #cityDistance tr:nth-child(odd) { background-color:#eee; } #cityDistance tr:nth-child(even) { background-color:#fff; } .numDistance { text-align:right; } </style> <script src="http://maps.google.com/maps/api/js?sensor=false&libraries=geometry"> </script> <script> // global reference variable let map; // success callback function for getCurrentPosition function geoSuccess(position) { // get our lat and lng coordinates let myPosLat = position.coords.latitude; let myPosLng = position.coords.longitude; // display the coords and timestamp object fields document.getElementById('myPosLat').innerHTML = myPosLat; document.getElementById('myPosLng').innerHTML = myPosLng; // create our latlng object let myLatLng = new google.maps.LatLng(myPosLat, myPosLng); // set our options for the map and create the map let myOptions = { zoom: 14, center: myLatLng, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById('mapCanvas'), myOptions); // reverse geocode the lat and lng reverseGeoCode(myLatLng); // calculate the distance to points of interest calculateDistance(myLatLng); // update our status document.getElementById('geoStatus').innerHTML = 'Location Retrieved'; } // function to reverse geocode given a lat / lng function reverseGeoCode(geoLatLng) { // create our object instances let geocoder = new google.maps.Geocoder(); let infowindow = new google.maps.InfoWindow(); // perform our geocoding geocoder.geocode({'latLng': geoLatLng}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { // check if we received an address if (results[0]) { // create marker on map let marker = new google.maps.Marker({ position: geoLatLng, map: map }); // set the content to the address and open the window infowindow.setContent(results[0].formatted_address); infowindow.open(map, marker); } } else { alert('Geocoder failed due to: ' + status); } }); } // calculate distance function function calculateDistance(disLatLng) { // set up variables and objects for distance let conEarth = 3963.19; // ave. miles circumference let gmapsSpherLib = google.maps.geometry.spherical; // points of interest let NYCLatLng = new google.maps.LatLng(40.7141667,-74.0063889); let LDNLatLng = new google.maps.LatLng(51.5001524,-0.1262362); let SFOLatLng = new google.maps.LatLng(37.615223,-122.389979); // distance calculations let distFromLDN = gmapsSpherLib.computeDistanceBetween(disLatLng,LDNLatLng,conEarth). toFixed(2); let distFromNYC = gmapsSpherLib.computeDistanceBetween(disLatLng,NYCLatLng,conEarth). toFixed(2); let distFromSFO = gmapsSpherLib.computeDistanceBetween(disLatLng,SFOLatLng,con Earth). toFixed(2); // set display with values document.getElementById('divDistFromLDN').innerHTML = distFromLDN + ' mi.'; document.getElementById('divDistFromNYC').innerHTML = distFromNYC + ' mi.'; document.getElementById('divDistFromSFO').innerHTML = distFromSFO + ' mi.'; } // error handler for getCurrentPosition function geoErrorHandler(error) { // initialize our error message let errMessage = 'ERROR: '; // based on the error code parameter set the message switch(error.code) { case error.PERMISSION_DENIED: errMessage += 'User did not share geolocation data.'; break; case error.POSITION_UNAVAILABLE: errMessage += 'Could not detect current position.'; break; case error.TIMEOUT: errMessage += 'Retrieving position timed out.'; break; default: errMessage += 'Unknown error.'; break; } // display the error to the user document.getElementById('geoStatus').innerHTML = errMessage; } // function to initialize call for position function setLocation() { let divStatus = document.getElementById('geoStatus'); // check for geolocation support if (navigator.geolocation) { // oldest allowed is 1 minute and timeout as 30 sec. let posOptions = {maximumAge:60000, timeout:30000}; // make asynchronous getCurrentPosition call navigator.geolocation.getCurrentPosition(geoSuccess, geoErrorHandler, posOptions); divStatus.innerHTML = 'Retrieving your location.'; } else { // geolocation not supported divStatus.innerHTML = 'Geolocation API Not Supported'; } } // Launch the location retrieval window.addEventListener('load',setLocation,false); </script> </head> <body> <div id="container"> <div id="mapCanvas"></div> <div id="location"> <table id="status"> <tr> <td colspan="2"><div id="geoStatus"></div></td> </tr> <tr> <td>Latitude:</td> <td class="numDistance"><div id="myPosLat"></div></td> </tr> <tr> <td>Longitude:</td> <td class="numDistance"><div id="myPosLng"></div></td> </tr> </table> </div> <div id="distance"> <table id="cityDistance"> <tr> <td>London:</td> <td class="numDistance"><div id="divDistFromLDN"></div></td> </tr> <tr> <td>New York:</td> <td class="numDistance"><div id="divDistFromNYC"></div></td> </tr> <tr> <td>San Francisco:</td> <td class="numDistance"><div id="divDistFromSFO"></div></td> </tr> </table> </div> </div> </body> </html>