Html 5 geolocation api

HTML 5 Geolocation API
Muhammad Ehtisham Siddiqui
Aptech Computer Education

What is Geolocation
 The HTML Geolocation API is used to locate a user's position.
 he HTML Geolocation API is used to get the geographical position of a user.
 Geolocation is most accurate for devices with GPS, like iPhone.

Browsers Support
API Chrome Internet Explorer Firefox Safari Opera
Geolocation 5.0 - 49.0 (http)
50.0 (https)
9.0 3.5 5.0 16.0

How to use API
 Check if Geolocation is supported
 If supported, run the getCurrentPosition()
method. If not, display a message to the user
 If the getCurrentPosition() method is
successful, it returns a coordinates object to
the function specified in the parameter
(showPosition)
 The showPosition() function outputs the
Latitude and Longitude
 if (navigator.geolocation)
 if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition
(showPosition); }
 function showPosition(position) {
x.innerHTML = "Latitude: " +
position.coords.latitude +
"<br>Longitude: " +
position.coords.longitude;
}

Steps
Check if Geolocation
is supported
If supported, run the
getCurrentPosition()
method. If not,
display a message to
the user
If the
getCurrentPosition()
method is
successful, it returns
a coordinates object
to the function
specified in the
parameter
(showPosition)
The showPosition()
function outputs the
Latitude and
Longitude

Finding Longitude & Latitude
<!DOCTYPE html><html><body>
<p>Click the button to get your coordinates.</p>
<button onclick="getLocation()">Try It</button><p id="demo"></p><script>var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);} else {
x.innerHTML = "Geolocation is not supported by this browser.";}}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;}
</script></body> </html>

Displaying the result in MAP
<!DOCTYPE html><html><body><p id="demo">Click the button to get your position.</p><button onclick="getLocation()">Try It</button><div
id="mapholder"></div><script>
var x = document.getElementById("demo");
function getLocation() {
if
(navigator.geolocation) {navigator.geolocation.getCurrentPosition(showPosition, showError);}
else {
x.innerHTML = "Geolocation is not supported by this browser."; }}function showPosition(position) {var latlon = position.coords.latitude + "," +
position.coords.longitude;
var img_url = "https://maps.googleapis.com/maps/api/staticmap?center="
+latlon+"&zoom=14&size=400x300&key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU";
document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";}
}</script></body></html>

Html 5 geolocation api

More Related Content

What's hot (20)

Similar to Html 5 geolocation api (20)

More from Muhammad Ehtisham Siddiqui (20)

Recently uploaded (20)

Html 5 geolocation api