<\/p>\n
There are instances when you\u2019d like web users to provide their locations to applications that they are using. This is because of privacy reasons. For instance, you may want to seek the user\u2019s permission to report his\/her location information to an application that you\u2019re using.<\/p>\n
The Geolocation feature in HTML5 is an API that can help you get user\u2019s location data, but only if with their permissions. In this blog post, we explore this HTML5 API feature. Let\u2019s dive in.<\/p>\n
Checking browser compatibility for HTML5 Geolocation API<\/strong><\/p>\n Of course, the first thing that you should do even before you think of implementing this feature on your website is checking whether your current browser is compatible with Geolocation feature. Here\u2019s the code that can help you check for compatibility:<\/p>\n <\/p>\n How can you get the current location of the user?<\/strong><\/p>\n You\u2019ll use the \u201cgetCurrentPosition\u201d function of the \u201cnavigator.geolocation\u201d object. The getCurrentPosition function accepts three arguments as its parameters. These are the Success callback, Error callback and position options. If the location data of the user has been fetched successfully, then the success callback is invoked with the obtained position object as the input parameter.<\/p>\n Otherwise, the error callback function is invoked with the error object as the input parameter. Here\u2019s the code that can get the current location of user:<\/p>\n Let\u2019s dive deeper and learn more about the three functions<\/p>\n #1: Success Callback function<\/strong><\/p>\n This function will only be invoked when the web user accepts to share his\/her current location information. In this case, the location information will be available as the position object where the function will be called using the position object as the input parameter. The position object will indicate the timestamp which denotes the time at which the location data was retrieved and coordinates of the object.<\/p>\n The coords object has the following characteristics:<\/p>\n \u25cf \u00a0Latitude and longitude. These are the geographical coordinates expressed in decimal degrees. #2: Error callback function<\/strong><\/p>\n The Error callback function is an optional callback function which takes the Position Error object as its input argument. It is invoked under the following conditions:<\/p>\n \u25cf \u00a0When an unknown error has occurred #3: Position Options<\/strong><\/p>\n It indicates the options that are available for use while retrieving the web user\u2019s location. These options are:<\/p>\n \u25cf \u00a0EnableHighAccuracy. It\u2019s a Boolean. If its value is true, then user agent will try to provide the most accurate \u00a0 \u00a0 position. Otherwise, if its value is false, then a less accurate position is obtained. There are instances when you\u2019d like web users to provide their locations to applications that they are using. This is because of privacy reasons. For instance, you may want to seek the user\u2019s permission to report his\/her location information to an application that you\u2019re using. The Geolocation feature in HTML5 is an API that can …<\/p>\n","protected":false},"author":12,"featured_media":1370,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false},"categories":[723,743],"tags":[789,843,850,1002,1054,1133],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.capitalnumbers.com\/blog\/wp-json\/wp\/v2\/posts\/1369"}],"collection":[{"href":"https:\/\/www.capitalnumbers.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.capitalnumbers.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.capitalnumbers.com\/blog\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/www.capitalnumbers.com\/blog\/wp-json\/wp\/v2\/comments?post=1369"}],"version-history":[{"count":3,"href":"https:\/\/www.capitalnumbers.com\/blog\/wp-json\/wp\/v2\/posts\/1369\/revisions"}],"predecessor-version":[{"id":16349,"href":"https:\/\/www.capitalnumbers.com\/blog\/wp-json\/wp\/v2\/posts\/1369\/revisions\/16349"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.capitalnumbers.com\/blog\/wp-json\/wp\/v2\/media\/1370"}],"wp:attachment":[{"href":"https:\/\/www.capitalnumbers.com\/blog\/wp-json\/wp\/v2\/media?parent=1369"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.capitalnumbers.com\/blog\/wp-json\/wp\/v2\/categories?post=1369"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.capitalnumbers.com\/blog\/wp-json\/wp\/v2\/tags?post=1369"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}if (navigator.geolocation) {\n}\nelse {\nalert (\u201cThe Geolocation API is not compatible with your browser. Update your browser\u201d);\n}<\/pre>\nif (navigator.geolocation) {\nnavigator.geolocation.getCurrentPosition(showPosition, showError);\n}\nelse {\nalert (\u201cThe Geolocation API is not compatible with your browser. Update your browser\u201d);\n}<\/pre>\n
\n\u25cf \u00a0Accuracy. It specifies the accuracy levels of the latitude and longitude coordinates in meters.
\n\u25cf \u00a0Altitude. It\u2019s the height of the current user\u2019s position above the sea level expressed in meters.
\n\u25cf \u00a0AltitudeAccuracy. It specifies the how far off the altitude position could be from the actual attitude value
\n\u25cf \u00a0Heading. It indicates the 360-degree heading information.
\n\u25cf \u00a0Speed. It provides the relative speed of the web user in meters per second.<\/p>\n
\n\u25cf \u00a0When the request has timed out
\n\u25cf \u00a0When the user has denied sharing his\/her current location information.
\n\u25cf \u00a0The location information isn\u2019t available.<\/p>\n
\n\u25cf \u00a0Timeout. It indicates the maximum time which a user agent can take to respond to the location data request.
\n\u25cf \u00a0MaximumAge. It specifies how long the user can keep using the cached location data before getting the new location information.<\/p>\n","protected":false},"excerpt":{"rendered":"