English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
geolocationThe read-only property returns a Geolocation object that can be used to locate the user's position.
For privacy reasons, users are required to allow their location information to be reported.
Note:This feature is only available in secure contexts (HTTPS) of some or all supported browsers.
You can find more information in ourHTML5In the geolocation guideLearn more about geolocation.
navigator.geolocation
<script>
var x = document.getElementById("demo");
function getLocation () {
navigator.geolocation.getCurrentPosition(showLoc);
x.innerHTML = 'Getting location...39;;
}
function showLoc (pos) {
x.innerHTML = "Latitude: " + pos.coords.latitude +
"<br>Longitude: " + pos.coords.longitude;
}
</script>Test and see‹/›The numbers in the table specify the first browser version that fully supports the geolocation attribute:
| properties | |||||
| geolocation | 5 | 3.5 | 16 | 5 | 9 |
| Return value: | Reference to the Geolocation object |
|---|
This example displays all Navigator properties:
var txt = ""; txt += "<p>Browser CodeName: " + navigator.appCodeName + "</p>"; txt += "<p>Browser Name: " + navigator.appName + "</p>"; txt += "<p>Browser Version: " + navigator.appVersion + "</p>"; txt += "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>"; txt += "<p>Browser Language: " + navigator.language + "</p>"; txt += "<p>Browser Online: " + navigator.onLine + "</p>"; txt += "<p>Platform: " + navigator.platform + "</p>"; txt += "<p>User-agent header: " + navigator.userAgent + "</p>"; document.write(txt);Test and see‹/›
In the following example, the returned latitude and longitude are used to display the location on Google Maps:
<script>
function showLoc(pos) {
var latt = pos.coords.latitude;
var long = pos.coords.longitude;
var lattlong = new google.maps.LatLng(latt, long);
var options = {
center: lattlong,
zoom: 10,
mapTypeControl: true,
navigationControlOptions: {style:google.maps.NavigationControlStyle.SMALL}
;
var mapg = new google.maps.Map(x, options);
var mark = new google.maps.Marker({position:lattlong, map:mapg, title:"You are here!"});
}
</script>Test and see‹/›Displaying a location on the map is a very interesting task. This service is used to provide exact locations within the map.
To display results on the map, you need to access map services, such as Google Maps.
The functionality of the map is provided by the JavaScript library located at Google:
< script src = “ https://maps.googleapis.com/maps/api/js?key= YOUR_KEY ” > </ script >
Navigator Reference:navigator.appCodeName property
Navigator Reference:navigator.appname property
Navigator Reference:navigator.appVersion property
Navigator Reference:navigator.language property
Navigator Reference:navigator.onLine property
Navigator Reference:navigator.platform property
Navigator Reference:navigator.userAgent property