{"id":17802,"date":"2013-07-31T21:01:24","date_gmt":"2013-07-31T13:01:24","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=17802"},"modified":"2025-04-04T01:35:31","modified_gmt":"2025-04-03T17:35:31","slug":"html5-geolocation","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/html5-geolocation\/","title":{"rendered":"How to Get User Location with HTML5 Geolocation API"},"content":{"rendered":"<p>In many cases, obtaining user location would be extremely useful to establish better user experience, for example:<\/p>\n<ul>\n<li>E-commerce sites can immediately provide shipping cost estimation and inform product availability from local retailers<\/li>\n<li>News sites can provide localized headlines and weather report.<\/li>\n<li>Daily deal sites can provide offers and discounts available from user\u2019s local stores or restaurants.<\/li>\n<li>Movie sites can listed the \u2018Now Playing\u2019 movies in nearby theatres, <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/docs.microsoft.com\/en-gb\/\">etc<\/a> <\/li>\n<\/ul>\n<p>In the past, to retrieve user location, we might need to provide a list of locations for users to opt-in, or rely on the device IP address to make a rough estimation of their location. Today, we can do this job in a much leaner way with less complexity using <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.w3.org\/TR\/geolocation-API\/\">Geolocation API<\/a>.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/how-to-zoom-this-close-into-google-maps\/\" class=\"ref-block__link\" title=\"Read More: How to Zoom This Close Into Google Maps\" rel=\"bookmark\"><span class=\"screen-reader-text\">How to Zoom This Close Into Google Maps<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/how-to-zoom-this-close-into-google-maps.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-452 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/how-to-zoom-this-close-into-google-maps.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">How to Zoom This Close Into Google Maps<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tIt is almost impossible to imagine doing day-trips or traveling to a new place without checking it out...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<p><strong>The Geolocation API<\/strong> is a new technology that\u2019s introduced by <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.w3.org\/\">W3C<\/a> \u2013 the same organization behind <a href=\"https:\/\/www.hongkiat.com\/blog\/tag\/html\/\">HTML5<\/a>. Probably for that reason, it is often correlated and grouped with HTML5 in many books and references, although it has actually nothing to do with HTML5 technically.<\/p>\n<ul class=\"download\">\n<li> <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/hongkiat.github.io\/html5-geolocation\/\">View Demo<\/a> <\/li>\n<\/ul>\n<p>In this post, we are going to use the API in its simplest form; we will create a set of functions to retrieve user\u2019s location and show it in map with <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/maps.google.com\/\">Google Maps<\/a>. Let\u2019s take a look.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-2\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/google-maps-styles\/\" class=\"ref-block__link\" title=\"Read More: How to Style Google Maps\" rel=\"bookmark\"><span class=\"screen-reader-text\">How to Style Google Maps<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/google-maps-styles.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-17210 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/google-maps-styles.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">How to Style Google Maps<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tGoogle Maps is one of the best services you can get from Google. It's a free tool that...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>Creating the Map with Google Maps API<\/h2>\n<p>First, we will use Google Maps API with a function called <code>GoogleMap<\/code> to specify the map. In the following JavaScript codes, we will get the location by specifying it with the following two Geolocation objects: <code>coords.latitude<\/code> and <code>coords.longitude<\/code>, which retrieve the Latitude and Longitude coordinates.<\/p>\n<p>Then, we set up the map and the location marker accordingly with <code>google.maps.Map<\/code> and <code>google.maps.Marker<\/code>, as follows.<\/p>\n<pre>function GoogleMap(position) {\r\n  var location = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);\r\n  var map = new google.maps.Map(document.getElementById('map'), {\r\n    zoom: 10,\r\n    disableDefaultUI: true,\r\n    mapTypeId: google.maps.MapTypeId.TERRAIN,\r\n  });\r\n  var marker = new google.maps.Marker({\r\n    map: map,\r\n    position: location,\r\n    animation: google.maps.Animation.DROP,\r\n    title: \"This is your location\"\r\n  });\r\n  map.setCenter(location);\r\n}\r\n<\/pre>\n<p>For more implementation on the Google Maps API, you can head over to the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/developers.google.com\/maps\/documentation\/javascript\/overview\">Google Maps JavaScript API v3<\/a> documentation.<\/p>\n<h2>Error Report<\/h2>\n<p>Then, we create a function for the error report when the location cannot be retrieved. In this case, we will show an alert window saying \u201cLocation can\u2019t be found\u201d.<\/p>\n<pre>function showError() {\r\n  alert(\"Location can't be found\");\r\n}\r\n<\/pre>\n<h2>Running Geolocation<\/h2>\n<p>The Geolocation API is quite simple. It specifies with the <code>navigator.geolocation<\/code> object, as you can see from the following code.<\/p>\n<pre>\r\n if (navigator.geolocation) {\r\n navigator.geolocation.getCurrentPosition(GoogleMap, showError);\r\n }\r\n else {\r\n alert(\"Your browser does not support Geolocation.\");\r\n }\r\n <\/pre>\n<p>In the above code, we will first run a test whether the user\u2019s device has support for Geolocation API. If it returns \u201cno\u201d we will show an alert window showing that \u201cThe browser does not support Geolocation\u201d. If it does, we will try to retrieve the location using the <code>getCurrentPosition<\/code> method.<\/p>\n<p>When the location coordinate has been retrieved, it will send the data to <code>GoogleMap<\/code> function, to show in the map. If the location cannot be located, the <code>showError<\/code> function will be executed instead.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/html5-geolocation\/cannot-found-location.jpg\" width=\"500\" height=\"300\"><\/figure>\n<h2>User Privacy<\/h2>\n<p>Since this is a matter of user privacy, users have to be <strong>aware<\/strong> that the device or the Web they are visiting will be tracking their location. As <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.w3.org\/TR\/geolocation-API\/#security\">W3C has stated in the documentation<\/a>:<\/p>\n<p><em>User agents must not send location information to Web sites without the express permission of the user.<\/em><\/p>\n<p>For this reason, the browser will first prompt the users whether they <strong>Allow<\/strong> or <strong>Deny<\/strong> for the browser to track their location information.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/html5-geolocation\/user-permission.jpg\" width=\"500\" height=\"100\"><\/figure>\n<h2>Result Accuracy<\/h2>\n<p>The result accuracy depends on many factors such as:<\/p>\n<ul>\n<li>The user\u2019s location<\/li>\n<li>The availability of data sources \u2013 such as wireless access points and IP Address<\/li>\n<li>The device itself<\/li>\n<\/ul>\n<p>In the following screenshot I tested the above code in my Macbook and iPhone. It turns out that the iPhone shows a more accurate location than one at my MacBook, as it is equipped with GPS hardware.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/html5-geolocation\/mac-iphone.jpg\" width=\"500\" height=\"300\"><\/figure>\n<h2>Further references<\/h2>\n<p>As we mentioned, we just did a simple thing with Geolocation, but the actual potential is so much more than that. There are many more ideas we can implement with the API. So, if you are keen to dig into this subject further, you can head over to the following sources:<\/p>\n<ul>\n<li> <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.w3.org\/TR\/geolocation-API\/\">Geolocation API Specification<\/a> \u2013 W3C <\/li>\n<li> <a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/diveintohtml5.info\/geolocation.html\">You are here (and so everybody else)<\/a> \u2013 Dive into HTML5 <\/li>\n<li> <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.mozilla.org\/en-US\/firefox\/geolocation\/\">Location-Aware Browsing<\/a> \u2013 Firefox <\/li>\n<li> <a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/www.netmagazine.com\/tutorials\/getting-started-html5-geolocation\">Getting Started with HTML5 Geolocation<\/a> \u2013 Net Magazine <\/li>\n<li> <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/docs.microsoft.com\/en-gb\/\" title=\"12 Cool Geolocation Ideas\">12 Cool HTML5 Geolocation Ideas<\/a> \u2013 MSDN <\/li>\n<\/ul>\n<p>Lastly, head over to the demo page to see how it is in action.<\/p>\n<ul class=\"download download-2c\">\n<li> <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/hongkiat.github.io\/html5-geolocation\/\">View Demo<\/a> <\/li>\n<li> <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/hongkiat\/html5-geolocation\/\">Download Source<\/a> <\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>In many cases, obtaining user location would be extremely useful to establish better user experience, for example: E-commerce sites can immediately provide shipping cost estimation and inform product availability from local retailers News sites can provide localized headlines and weather report. Daily deal sites can provide offers and discounts available from user\u2019s local stores or&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[506,2016],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Using HTML5 Geolocation API<\/title>\n<meta name=\"description\" content=\"In many cases, obtaining user location would be extremely useful to establish better user experience, for example: E-commerce sites can immediately\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/html5-geolocation\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Get User Location with HTML5 Geolocation API\" \/>\n<meta property=\"og:description\" content=\"In many cases, obtaining user location would be extremely useful to establish better user experience, for example: E-commerce sites can immediately\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/html5-geolocation\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2013-07-31T13:01:24+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T17:35:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/html5-geolocation\/cannot-found-location.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-geolocation\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-geolocation\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"How to Get User Location with HTML5 Geolocation API\",\"datePublished\":\"2013-07-31T13:01:24+00:00\",\"dateModified\":\"2025-04-03T17:35:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-geolocation\\\/\"},\"wordCount\":691,\"commentCount\":5,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-geolocation\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html5-geolocation\\\/cannot-found-location.jpg\",\"keywords\":[\"HTML\",\"HTML5 \\\/ CSS3 Tutorials\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-geolocation\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-geolocation\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-geolocation\\\/\",\"name\":\"Using HTML5 Geolocation API\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-geolocation\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-geolocation\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html5-geolocation\\\/cannot-found-location.jpg\",\"datePublished\":\"2013-07-31T13:01:24+00:00\",\"dateModified\":\"2025-04-03T17:35:31+00:00\",\"description\":\"In many cases, obtaining user location would be extremely useful to establish better user experience, for example: E-commerce sites can immediately\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-geolocation\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-geolocation\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-geolocation\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html5-geolocation\\\/cannot-found-location.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html5-geolocation\\\/cannot-found-location.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-geolocation\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Get User Location with HTML5 Geolocation API\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Using HTML5 Geolocation API","description":"In many cases, obtaining user location would be extremely useful to establish better user experience, for example: E-commerce sites can immediately","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/html5-geolocation\/","og_locale":"en_US","og_type":"article","og_title":"How to Get User Location with HTML5 Geolocation API","og_description":"In many cases, obtaining user location would be extremely useful to establish better user experience, for example: E-commerce sites can immediately","og_url":"https:\/\/www.hongkiat.com\/blog\/html5-geolocation\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2013-07-31T13:01:24+00:00","article_modified_time":"2025-04-03T17:35:31+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/html5-geolocation\/cannot-found-location.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/html5-geolocation\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-geolocation\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"How to Get User Location with HTML5 Geolocation API","datePublished":"2013-07-31T13:01:24+00:00","dateModified":"2025-04-03T17:35:31+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-geolocation\/"},"wordCount":691,"commentCount":5,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-geolocation\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/html5-geolocation\/cannot-found-location.jpg","keywords":["HTML","HTML5 \/ CSS3 Tutorials"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/html5-geolocation\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/html5-geolocation\/","url":"https:\/\/www.hongkiat.com\/blog\/html5-geolocation\/","name":"Using HTML5 Geolocation API","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-geolocation\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-geolocation\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/html5-geolocation\/cannot-found-location.jpg","datePublished":"2013-07-31T13:01:24+00:00","dateModified":"2025-04-03T17:35:31+00:00","description":"In many cases, obtaining user location would be extremely useful to establish better user experience, for example: E-commerce sites can immediately","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-geolocation\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/html5-geolocation\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/html5-geolocation\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/html5-geolocation\/cannot-found-location.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/html5-geolocation\/cannot-found-location.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/html5-geolocation\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Get User Location with HTML5 Geolocation API"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-4D8","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/17802","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=17802"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/17802\/revisions"}],"predecessor-version":[{"id":73618,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/17802\/revisions\/73618"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=17802"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=17802"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=17802"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=17802"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}