8/3/13

HTML5 Geolocation
Search w3schools.com: Select Language

HOME

HTML

C SS

JAVASC RIPT

JQUERY

XML

ASP.NET

PHP

SQL

MORE...

R EFER ENC ES

EXAMPLES

FO R UM

ABO UT

Get Certified
Study Web Technologies and get a diploma at w3schools.com

SHARE THIS PAGE

Like

76k

HTML Basic
HTML HOME HTML Introduction HTML Editors HTML Basic HTML Elements HTML Attributes HTML Headings HTML Paragraphs HTML Formatting HTML Links HTML Head HTML CSS HTML Images HTML Tables HTML Lists HTML Blocks HTML Layout HTML Forms HTML Iframes HTML Colors HTML Colornames HTML Colorvalues HTML JavaScript HTML Entities HTML URL Encode HTML Quick List HTML Summary HTML XHTML

HTML5 Geolocation
Previous
HTML5 Geolocation is used to locate a user's position

WEB HOSTING

Next Chapter

Best Web Hosting eUK Web Hosting UK Reseller Hosting Domain, Hosting & Email

Try It

Locate the User's Position

The HTML5 Geolocation API is used to get the geographical position of a user. Since this can compromise user privacy, the position is not available unless the user approves it.

WEB BUILDING
Download XML Editor FREE Website BUILDER FREE Website C reator

Browser Support

Best Website Templates

STATISTICS Internet Explorer 9+, Firefox, Chrome, Safari and Opera support Geolocation. Note: Geolocation is much more accurate for devices with GPS, like iPhone.
Browser Statistics OS Statistics Display Statistics

HTML5 - Using Geolocation

Use the getCurrentPosition() method to get the user's position. The example below is a simple Geolocation example returning the latitude and longitude of the user's position:

Example
< s c r i p t > v a rx = d o c u m e n t . g e t E l e m e n t B y I d ( " d e m o " ) ; f u n c t i o ng e t L o c a t i o n ( ) { i f( n a v i g a t o r . g e o l o c a t i o n ) { n a v i g a t o r . g e o l o c a t i o n . g e t C u r r e n t P o s i t i o n ( s h o w P o s i t i o n ) ; } e l s e { x . i n n e r H T M L = " G e o l o c a t i o ni sn o ts u p p o r t e db yt h i sb r o w s e r . " ; } } f u n c t i o ns h o w P o s i t i o n ( p o s i t i o n ) { x . i n n e r H T M L = " L a t i t u d e :"+p o s i t i o n . c o o r d s . l a t i t u d e+ " < b r > L o n g i t u d e :"+p o s i t i o n . c o o r d s . l o n g i t u d e ; } < / s c r i p t >
Try it yourself Example explained: 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 gets the displays the Latitude and Longitude The example above is a very basic Geolocation script, with no error handling.

HTML5 News
HTML5 Intro HTML5 New Elements HTML5 Canvas HTML5 SVG HTML5 Drag/Drop HTML5 Geolocation HTML5 Video HTML5 Audio HTML5 Input Types HTML5 Form Elements HTML5 Form Attributes HTML5 Semantic HTML5 Web Storage HTML5 App Cache HTML5 Web Workers HTML5 SSE

HTML Media
HTML Media HTML Object HTML Audio HTML Video HTML YouTube

Handling Errors and Rejections

The second parameter of the getCurrentPosition() method is used to handle errors. It specifies a function to run if it fails to get the user's location:

Example
f u n c t i o ns h o w E r r o r ( e r r o r ) { s w i t c h ( e r r o r . c o d e ) { c a s ee r r o r . P E R M I S S I O N _ D E N I E D : x . i n n e r H T M L = " U s e rd e n i e dt h er e q u e s tf o rG e o l o c a t i o n . " b r e a k ; c a s ee r r o r . P O S I T I O N _ U N A V A I L A B L E : x . i n n e r H T M L = " L o c a t i o ni n f o r m a t i o ni su n a v a i l a b l e . " b r e a k ; c a s ee r r o r . T I M E O U T : x . i n n e r H T M L = " T h er e q u e s tt og e tu s e rl o c a t i o nt i m e do u t . " b r e a k ;

HTML Examples
HTML Examples HTML Quiz HTML5 Quiz HTML Certificate HTML5 Certificate

HTML References
HTML Tag List HTML Attributes

w3schools.com/html/html5_geolocation.asp

1/3

8/3/13
HTML Events HTML Canvas HTML Audio/Video HTML Doctypes HTML Colornames HTML Colorpicker HTML Colormixer HTML Character Sets HTML ASCII HTML ISO-8859-1 HTML Symbols HTML URL Encode HTML Lang Codes HTTP Messages HTTP Methods Keyboard Shortcuts Error Codes: Try it yourself

HTML5 Geolocation
c a s ee r r o r . U N K N O W N _ E R R O R : x . i n n e r H T M L = " A nu n k n o w ne r r o ro c c u r r e d . " b r e a k ; } }

Permission denied - The user did not allow Geolocation Position unavailable - It is not possible to get the current location Timeout - The operation timed out

Displaying the Result in a Map

To display the result in a map, you need access to a map service that can use latitude and longitude, like Google Maps:

Example
f u n c t i o ns h o w P o s i t i o n ( p o s i t i o n ) { v a rl a t l o n = p o s i t i o n . c o o r d s . l a t i t u d e + " , " + p o s i t i o n . c o o r d s . l o n g i t u d e ; v a ri m g _ u r l = " h t t p : / / m a p s . g o o g l e a p i s . c o m / m a p s / a p i / s t a t i c m a p ? c e n t e r = " + l a t l o n + " & z o o m = 1 4 & s i z e = 4 0 0 x 3 0 0 & s e n s o r = f a l s e " ; d o c u m e n t . g e t E l e m e n t B y I d ( " m a p h o l d e r " ) . i n n e r H T M L = " < i m gs r c = ' " + i m g _ u r l + " ' > " ; }
Try it yourself In the example above we use the returned latitude and longitude data to show the location in a Google map (using a static image). Google Map Script How to use a script to show an interactive map with a marker, zoom and drag options.

Location-specific Information
This page demonstrated how to show a user's position on a map. However, Geolocation is also very useful for location-specific information. Examples: Up-to-date local information Showing Points-of-interest near the user Turn-by-turn navigation (GPS)

The getCurrentPosition() Method - Return Data

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 coords.latitude coords.longitude coords.accuracy coords.altitude Description The latitude as a decimal number The longitude as a decimal number The accuracy of position The altitude in meters above the mean sea level

coords.altitudeAccuracy The altitude accuracy of position coords.heading coords.speed timestamp The heading as degrees clockwise from North The speed in meters per second The date/time of the response

Geolocation object - Other interesting Methods

watchPosition() - Returns the current position of the user and continues to return updated position as the user moves (like the GPS in a car). clearWatch() - Stops the watchPosition() method. The example below shows the watchPosition() method. You need an accurate GPS device to test this (like iPhone):

Example
< s c r i p t > v a rx = d o c u m e n t . g e t E l e m e n t B y I d ( " d e m o " ) ; f u n c t i o ng e t L o c a t i o n ( ) { i f( n a v i g a t o r . g e o l o c a t i o n ) { n a v i g a t o r . g e o l o c a t i o n . w a t c h P o s i t i o n ( s h o w P o s i t i o n ) ; }

w3schools.com/html/html5_geolocation.asp

2/3

8/3/13

HTML5 Geolocation
e l s e { x . i n n e r H T M L = " G e o l o c a t i o ni sn o ts u p p o r t e db yt h i sb r o w s e r . " ; } } f u n c t i o ns h o w P o s i t i o n ( p o s i t i o n ) { x . i n n e r H T M L = " L a t i t u d e :"+p o s i t i o n . c o o r d s . l a t i t u d e+ " < b r > L o n g i t u d e :"+p o s i t i o n . c o o r d s . l o n g i t u d e ; } < / s c r i p t >
Try it yourself

Previous

Next Chapter

W3Schools' Online Certification

The perfect solution for professionals who need to balance work, family, and career building. More than 10 000 certificates already issued!

Get Your Certificate

The HTML Certificate documents your knowledge of HTML. The HTML5 Certificate documents your knowledge of advanced HTML5. The CSS Certificate documents your knowledge of advanced CSS. The JavaScript Certificate documents your knowledge of JavaScript and HTML DOM. The jQuery Certificate documents your knowledge of jQuery. The XML Certificate documents your knowledge of XML, XML DOM and XSLT. The ASP Certificate documents your knowledge of ASP, SQL, and ADO. The PHP Certificate documents your knowledge of PHP and SQL (MySQL).

Top 10 Tutorials
HTML Tutorial HTML5 Tutorial C SS Tutorial C SS3 Tutorial JavaScript Tutorial jQuery Tutorial SQL Tutorial PHP Tutorial ASP.NET Tutorial XML Tutorial

Top 10 References
HTML/HTML5 Reference C SS 1,2,3 Reference C SS 3 Browser Support JavaScript HTML DOM XML DOM PHP Reference jQuery Reference ASP.NET Reference HTML C olors

Examples
HTML Examples C SS Examples XML Examples JavaScript Examples HTML DOM Examples XML DOM Examples AJAX Examples ASP.NET Examples Razor Examples ASP Examples SVG Examples

Quizzes
HTML Quiz HTML5 Quiz XHTML Quiz C SS Quiz JavaScript Quiz jQuery Quiz XML Quiz ASP Quiz PHP Quiz SQL Quiz

Color Picker

Statistics
Browser Statistics Browser OS Browser Display

RE P O RT E RRO R

HO ME

TO P

P RI N T

FO RU M

A BO U T

A D V E RT I SE WI T H U S

W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using this site, you agree to have read and accepted our terms of use and privacy policy. C opyright 1999-2013 by Refsnes Data. All Rights Reserved.

w3schools.com/html/html5_geolocation.asp

3/3