HTML5 Location - getCurrentPosition() in HTML5

By: Emiley J Emailed: 1599 times Printed: 2046 times    

Latest comments
By: rohit kumar - how this program is work
By: Kirti - Hi..thx for the hadoop in
By: Spijker - I have altered the code a
By: ali mohammed - why we use the java in ne
By: ali mohammed - why we use the java in ne
By: mizhelle - when I exported the data
By: raul - no output as well, i'm ge
By: Rajesh - thanx very much...
By: Suindu De - Suppose we are executing

You can create cool location based services using HTML5. Prior to HTML5 you would need a native application to do that. Imagine you want to create a navigation application that shows the current location of the user on a map (on the phone or on the web) and the dot moves as the user moves and you want to add other cool features such as showing restaurants nearby or showing routes from point a to b etc, you would need to develop a native application on the mobile phones to do this. HTML5 changes all that and you can do it all using simple JavaScript commands in the browser (on the phone or on the web).

HTML5 has the Geolocation API that comes with inbuilt functions and scripts such as getCurrentPosition() method to get the user's position. Most of the common browsers including IE9, Chrome, Firefox and Safari already support these APIs.

The below code demonstrates the use of getCurrentPosition() to get the location of the user and then display the location on a map using google maps api.

<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)
{
var latlon=position.coords.latitude+","+position.coords.longitude;
var img_url="http://maps.googleapis.com/maps/api/staticmap?center=" + latlon + "&zoom=14&size=400x300&sensor=false";
document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>";
}
</script>

The getCurrentPosition() Method

The getCurrentPosition() method returns an object if it is successful. The latitude, longitude and accuracy properties are always returned. The other properties below are returned if available.

Property Description
coords.latitude The latitude as a decimal number
coords.longitude The longitude as a decimal number
coords.accuracy The accuracy of position
coords.altitude The altitude in meters above the mean sea level
coords.altitudeAccuracy The altitude accuracy of position
coords.heading The heading as degrees clockwise from North
coords.speed The speed in meters per second
timestamp The date/time of the response

HTML5 Home | All HTML5 Tutorials | Latest HTML5 Tutorials

Sponsored Links

If this tutorial doesn't answer your question, or you have a specific question, just ask an expert here. Post your question to get a direct answer.



Bookmark and Share

Comments(0)


Be the first one to add a comment

Your name (required):


Your email(required, will not be shown to the public):


Your sites URL (optional):


Your comments:



More Tutorials by Emiley J
Password must include both numeric and alphabetic characters - Magento
What is Hadoop?
Returning multiple values from a web service
Tomcat and httpd configured in port 8080 and 80
Java Webservices using Netbeans and Tomcat
Java WebService connected to Database
How to Deploy a Java Web Service
Call a webservice in Java
Java WebService - Create your first web service in Java
package javax.jws does not exist
Getting Started with Android
HTML5 Location - getCurrentPosition() in HTML5
HTML5 Canvas - Using Canvas in HTML5
HTML5 - Introduction
HTML5 Video - Handling video in HTML5

More Tutorials in HTML5
HTML5 Video - Handling video in HTML5
HTML5 - Introduction
HTML5 Canvas - Using Canvas in HTML5
HTML5 Location - getCurrentPosition() in HTML5

More Latest News
Most Viewed Articles (in HTML5 )
HTML5 Canvas - Using Canvas in HTML5
HTML5 Location - getCurrentPosition() in HTML5
HTML5 Video - Handling video in HTML5
HTML5 - Introduction
Most Emailed Articles (in HTML5)
HTML5 - Introduction
HTML5 Video - Handling video in HTML5
HTML5 Canvas - Using Canvas in HTML5
HTML5 Location - getCurrentPosition() in HTML5