In HTML5, we have a set of APIs to effectively allow the client-side device (i.e. your iPhone 3G+, Android 2.0+ phones, or even your conventional desktop browsers) to retrieve geographic positioning information with JavaScript.<\/p>\n
The Geolocation API is supported by the following\u00a0 browsers and\u00a0 smartphones. Minimum version requirements are mentioned as well.<\/p>\n
- \n
- Google Chrome 5.0<\/li>\n
- Internet Explorer 9.0<\/li>\n
- Firefox 3.5<\/li>\n
- Safari 5.0<\/li>\n
- Opera 16.0<\/li>\n
- Iphone 3.0<\/li>\n
- Android 2.0<\/li>\n
- Opera Mobile 10<\/li>\n
- Blackberry OS 6.0<\/li>\n<\/ul>\n
Security And Accuracy<\/h2>\n
When you\u2019re talking about sharing your physical location with a remote web server, note that this can compromise user privacy, the position is not available unless the user approves it. The browser will take care of this, and a message will either appear as a popup box (as shown below), or at the top of the browser (implementation is browser specific) requesting the user\u2019s permission. In case of smartphones, the relevant apps that uses GeoLocation may request the permission during installation itself.<\/p>\n
![\"Firefox](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/02\/Infobar-e1425040670748.jpeg\")
<\/a>Firefox InfoBar<\/figcaption><\/figure>\n The infobar that pops up in the browser, depicts a lot of information. It is non-modal and tab-specific so it will disappear while\u00a0 switching to another browser window or tab. There is no way for a website to bypass the permission infobar. The blocking nature of the infobar ensures that the website cannot determine your location before you answer. As the end user,<\/p>\n
- \n
- are told which website wants to know your location<\/li>\n
- can choose to share or not to share your location<\/li>\n
- can opt to remember your choice (share or don\u2019t share) to make this infobar disappear for ever for this website<\/li>\n<\/ul>\n
Different techniques are used to obtain the user\u2019s location, and each technique has its own varying degree of accuracy. A desktop browser is likely to use WiFi (accurate to 20m) or IP Geolocation which is only accurate to the city level and can provide false positives. Mobile devices tend to use triangulation<\/em> techniques such as GPS (accurate to 10m and only works outside), WiFi and GSM (Global System for Mobile) \/ CDMA (Code division multiple access) cell IDs (accurate to 1000m). Please refer to the reference section link\u00a0that talks in details about wireless geolocation techniques.<\/p>\n
Weather Widget<\/h2>\n
In this example, we will develop a simple weather widget using the HTML geolocation API and OpenWeather APIs. I must admit that I did not pay much emphasis on the display aspect of the example. Neither have I fully exploited the API offerings from OpenWeather API. Here is a screenshot of what we are going to develop today.<\/p>\n
![\"HTML](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/02\/GeoLocation-e1425047844582.jpeg\")
<\/a>HTML Geolocation<\/figcaption><\/figure>\n We will start of with the html. We refer to the external JavaScript and CSS and call the inital JavaScript function in body
onload()<\/code><\/p>\n\r\n<link rel="stylesheet" href="WeatherStyle.css">\r\n<script src="WeatherWidget.js"><\/script>\r\n<\/head>\r\n<body onload="getLocation()">\r\n<\/pre>\n
2 different html
table<\/code> elements are defined and assigned a CSS style<\/p>\n\r\n<table class="myTable">\r\n<table class="ForeCastTable">\r\n<\/pre>\n
We have also defined
div<\/code> element inside the table and assigned a specific id so that we can overwrite the content using JavaScript<\/p>\n\r\n\r\n<tr>\r\n<td><div id="location"><\/div><\/td>\r\n<td><div id="weatherNow"><\/div><\/td>\r\n<\/tr>\r\n\r\n<\/pre>\n
We will be using the free OpenWeather API to access the weather info in JSON format. We will parse the inputs and display them
\nFor more information and additional capabilities please refer to OpenWeather API link in the Reference section.<\/p>\nLet’s get started by defining the global variables. The reason we have broken the URLs is that we have to build the URLs at the runtime
\nNotice the separate static URLs for current weather, 5 day forecast and Image URL<\/p>\n\r\n\/\/define the global variables\r\n\/\/current weather URL\r\nvar BASE_URL = "http:\/\/api.openweathermap.org\/data\/2.5\/weather?";\r\nvar UrlParams = "&units=imperial&type=accurate&mode=json";\r\n\/\/ forecast URL\r\nvar Forecast_URL = "http:\/\/api.openweathermap.org\/data\/2.5\/forecast\/daily?";\r\nvar ForeCast_Params = "&cnt=5&units=imperial&type=accurate&mode=json";\r\n\/\/ Image base URL\r\nvar IMG_URL = "http:\/\/openweathermap.org\/img\/w\/";\r\n<\/pre>\n
In the\u00a0
getLocation()<\/code> function we will determine if Geolocation is supported<\/p>\n\r\n\r\nif (navigator.geolocation) {\r\n\r\n<\/pre>\nIf the geolocation is not supprted by the browser, display the error message.<\/p>\n
\r\n} else {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0alert("Geolocation is not supported by this browser");\r\n<\/pre>\nIn the API there are two functions available to obtain a user\u2019s location:
getCurrentPosition<\/code> andwatchPosition<\/code>. We will discuss the difference between the functions shortly. For now let’s see how they work. Both of these methods return immediately, and then asynchronously attempt to obtain the current location. They take the same number of arguments.<\/p>\n1.\u00a0<\/strong> successCallback \u2013 called if the method returns successfully. For example , getCurrentWeatherData is called.<\/p>\n
2.<\/strong> errorCallback – In case we encounter error for getCurrentPosition\u00a0 the errorCallback (displayError) is invoked.<\/p>\n
3.<\/strong> [options] \u2013 a number of options are available:<\/p>\n
a.<\/em> enableHighAccuracy \u2013 Defaults setting is false. Setting this property to true may cause a slower response time and in the case of a mobile device, greater power consumption as it may use GPS.
\nb.<\/em> timeout \u2013 Default is 0 which indicates infinite. depicts the maximum length of time in milliseconds to wait for a response. We set the timeout value to our computed value<\/p>\n\r\n\r\nvar timeoutVal = 10 * 1000 * 1000;\r\n\r\n<\/pre>\n
c.\u00a0<\/em> maximumAge \u2013 in Milliseconds and the default value is 0 which means get new position object immediately. It denotes the maximum age of a cached position that the application will be willing to accept.<\/p>\n
\r\n\r\nnavigator.geolocation.getCurrentPosition(getCurrentWeatherData, \/\/ successCallback\r\ndisplayError, { \/\/errorCallback\r\nenableHighAccuracy : true, \/\/ high accuracy\r\ntimeout : timeoutVal, \/\/\u00a0 in milliseconds\r\nmaximumAge : 0 \/\/ in milliseconds\r\n});\r\n\r\n<\/pre>\nInside our error callback function, we handle the error graciously by converting the return code to a simple error message<\/p>\n
\r\nfunction displayError(error) {\r\n\u00a0\u00a0 \u00a0var errors = {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a01 : 'Permission denied',\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a02 : 'Position unavailable',\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a03 : 'Request timeout'\r\n\u00a0\u00a0 \u00a0};\r\n\u00a0\u00a0 \u00a0alert("Error: " + errors[error.code]);\r\n}\r\n<\/pre>\nLet’s\u00a0summarize the steps :<\/p>\n
- \n
- Determine if Geolocation is supported<\/li>\n
- If supported, run the
getCurrentPosition()<\/code> method. If not, call theerrorcallback(displayError)<\/code><\/li>\n- If the
getCurrentPosition()<\/code> method is successful, it returns a coordinates object to the function specified in the parameter ( getCurrentWeatherData)<\/li>\n- The getCurrentWeatherData() function uses the
position<\/code> object for further processing.<\/li>\n<\/ul>\ngetCurrentPosition and watchPosition<\/h2>\n
The main difference between
getCurrentPosition<\/code> andwatchPosition<\/code> is thatwatchPosition<\/code> keeps informing your code when the position change, thereby updating the user\u2019s position. This is very useful if you want to track the movement of your end user like developing a driving direction apps. On the other hand thegetCurrentPosition<\/code> is a once off.<\/p>\nThe
watchPosition<\/code> method returnwatchID<\/code> which can be used to call theclearWatch<\/code> when you want to stop the position constantly being updated<\/p>\nPosition<\/h2>\n
When the user\u2019s position is returned, it is contained within a
Position<\/code> object which contains a number of properties<\/p>\n![\"Position](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/02\/Position.jpeg\")
<\/a>Position<\/figcaption><\/figure>\n If we are able to obtain a
Position<\/code> object we will use the relevant properties to form the URL as shown below.<\/p>\n\r\n\r\nvar WeatherNowAPIurl = BASE_URL + "lat=" + position.coords.latitude\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0+ "&lon=" + position.coords.longitude + UrlParams;\r\n\u00a0\u00a0 \u00a0var WeatherForecast_url = Forecast_URL + "lat=" + position.coords.latitude\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0+ "&lon=" + position.coords.longitude + ForeCast_Params;\r\n\r\n<\/pre>\n
In order to call the OpenWeather API\u00a0 we will use the\u00a0
XMLHttpRequest<\/code> object is used to exchange data with a server behind the scenes. When a request to a server is sent, we want to perform some actions based on the response.Theonreadystatechange<\/code>\u00a0 event is triggered every time thereadyState<\/code> changes. It stores a function (or the name of a function) to be called automatically each time thereadyState<\/code> property changes ThereadyState<\/code> property holds the status of theXMLHttpRequest<\/code>.<\/p>\nFollowing are the possible values for
readystate<\/code>:
\n0: request not initialized
\n1: server connection established
\n2: request received
\n3: processing request
\n4: request finished and response is ready<\/p>\nThe
status<\/code> property returns 200: “OK” or 404: Page not found. WhenreadyState<\/code> is 4 and status is 200, the response is ready. We are taking the JSON(Java Script Object Notation)responseText<\/code> and parsing it before calling\u00a0 the Parse() function that takes cares of displaying the content from the JSON object.<\/p>\n\r\nvar xmlhttp = new XMLHttpRequest();\r\nxmlhttp.onreadystatechange = function() {\r\nif (xmlhttp.readyState == 4 && xmlhttp.status == 200) {\r\nvar JSONobj = JSON.parse(xmlhttp.responseText);\r\nParse(JSONobj);\r\n}\r\n}\r\n<\/pre>\nNow you can use the open annd send properties of XMLHttpRequest object to call the API as shown below.<\/p>\n
\r\nxmlhttp.open("GET", WeatherNowAPIurl, true);\r\nxmlhttp.send();\r\n<\/pre>\nHandling JSON<\/h2>\n
To access the JSON object in JavaScript, parse it with
JSON.parse()<\/code>, and access it via \u201c.\u201d or \u201c[]\u201d. To refresh our memories . JSON is similar to XML as it is “self describing” , hierarchical\u00a0 and can be fetched usingXMLHttpRequest<\/code> and parsed with many programming languages. However, JSON doesn’t use a end tag, shorter in size and permits usage of arrays.<\/p>\nUnlike XML, JSON can use JavaScript and doesn’t need a XML parser to be parsed. The data in JSON is name\/value pairs separated by commas.Curly braces hold objects while Square brackets hold arrays.Here is an example of JSON response we got back from OpenWeather API call.<\/p>\n
\r\n\r\n{\r\n"cod": "200",\r\n"message": 0.3399,\r\n"city": {\r\n"id": 4945840,\r\n"name": "Northborough",\r\n"coord": {\r\n"lon": -71.641182,\r\n"lat": 42.319538\r\n},\r\n"country": "US",\r\n"population": 0\r\n},\r\n"cnt": 5,\r\n"list": [{\r\n"dt": 1424970000,\r\n"temp": {\r\n"day": 24.73,\r\n"min": 18.86,\r\n"max": 25.9,\r\n"night": 18.86,\r\n"eve": 21.69,\r\n"morn": 20.59\r\n},\r\n"pressure": 1009.86,\r\n"humidity": 51,\r\n"weather": [{\r\n"id": 803,\r\n"main": "Clouds",\r\n"description": "broken clouds",\r\n"icon": "04d"\r\n}],\r\n"speed": 4.02,\r\n"deg": 24,\r\n"clouds": 76\r\n},\r\n\r\n<\/pre>\nHere is an example of how we have parsed the JSON response<\/p>\n
\r\n\r\n\/\/ current Location\r\ndocument.getElementById("location").innerHTML = "Country :"\r\n+ obj.sys.country + "<br>" + "City :" + obj.name + "<br>"\r\n+ "Latitude:" + obj.coord.lat + "<br>" + "Longitude:"\r\n+ obj.coord.lon + "<br>";\r\n\/\/ current weather\r\ndocument.getElementById("weatherNow").innerHTML = "<img src='" + IMG_URL\r\n+ obj.weather[0].icon + ".png'> " + "<br> Condition:"\r\n+ obj.weather[0].description + "<br>" + "Temp:" + obj.main.temp\r\n+ " F<br>" + "Humidity:" + obj.main.humidity + " hPa <br>"\r\n+ "Cloudiness:" + obj.clouds.all + "% <br>" + "Wind:"\r\n+ obj.wind.speed + " mps <br>";\r\n\r\n<\/pre>\nAs mentioned earlier, I have only touched the tip of the iceberg here. Please refer to the API documentation from OpenWeather and feel free to experiment with the various API functions.<\/p>\n
Download<\/h2>\n
Download the project of this tutorial:<\/p>\n
Download<\/strong>
\nYou can download the full source code of this example here: Geolocation Example<\/strong><\/a><\/div>\nReference<\/h2>\n
- \n
- Wireless Geolocation Techniques A Survey<\/a><\/li>\n
- OpenWeather API<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
Introduction At the heart of every location-based application is positioning and Geolocation.\u00a0Geolocation is similar to\u00a0 the use of positioning systems but is more focused on determining a meaningful location (e.g. a street address) rather than just a set of geographic coordinates. In this tutorial you will learn the Geolocation capabilities of HTML5. The API provides …<\/p>\n","protected":false},"author":47,"featured_media":914,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[110],"class_list":["post-2586","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html5","tag-openweather"],"yoast_head":"\n
HTML5 Geolocation Example - Weather Widget Demo - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"Interested to learn more about html5 geolocation? Check out our Example where you will learn the Geolocation capabilities of HTML5!\" \/>\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.webcodegeeks.com\/html5\/html5-geolocation-example-weather-widget-demo\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML5 Geolocation Example - Weather Widget Demo - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"Interested to learn more about html5 geolocation? Check out our Example where you will learn the Geolocation capabilities of HTML5!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/html5\/html5-geolocation-example-weather-widget-demo\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:published_time\" content=\"2015-03-02T11:15:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-06-20T13:07:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Arindam Chattopadhya\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Arindam Chattopadhya\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-geolocation-example-weather-widget-demo\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-geolocation-example-weather-widget-demo\/\"},\"author\":{\"name\":\"Arindam Chattopadhya\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/78b9675665f8627e97ed2dd1fd8cdf00\"},\"headline\":\"HTML5 Geolocation Example – Weather Widget Demo\",\"datePublished\":\"2015-03-02T11:15:52+00:00\",\"dateModified\":\"2018-06-20T13:07:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-geolocation-example-weather-widget-demo\/\"},\"wordCount\":2027,\"commentCount\":3,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-geolocation-example-weather-widget-demo\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"keywords\":[\"OpenWeather\"],\"articleSection\":[\"HTML5\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/html5\/html5-geolocation-example-weather-widget-demo\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-geolocation-example-weather-widget-demo\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-geolocation-example-weather-widget-demo\/\",\"name\":\"HTML5 Geolocation Example - Weather Widget Demo - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-geolocation-example-weather-widget-demo\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-geolocation-example-weather-widget-demo\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"datePublished\":\"2015-03-02T11:15:52+00:00\",\"dateModified\":\"2018-06-20T13:07:41+00:00\",\"description\":\"Interested to learn more about html5 geolocation? Check out our Example where you will learn the Geolocation capabilities of HTML5!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-geolocation-example-weather-widget-demo\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/html5\/html5-geolocation-example-weather-widget-demo\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-geolocation-example-weather-widget-demo\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-geolocation-example-weather-widget-demo\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML5\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/html5\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"HTML5 Geolocation Example – Weather Widget Demo\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/78b9675665f8627e97ed2dd1fd8cdf00\",\"name\":\"Arindam Chattopadhya\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/4c54fbd5748a5a51f90f73ca68fe86ae6bf8e416966a283b2c05bf15c86c4dd3?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/4c54fbd5748a5a51f90f73ca68fe86ae6bf8e416966a283b2c05bf15c86c4dd3?s=96&d=mm&r=g\",\"caption\":\"Arindam Chattopadhya\"},\"description\":\"Arindam has completed Masters in Information Technology. His expertise includes enterprise applications architecture, application integration, legacy connectivity, user interface engineering, systems analysis and distributed systems architecture and design. He has hand-on expertise on Java EE , web technology and mobile application development.\",\"sameAs\":[\"http:\/\/www.webcodegeeks.com\/\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/arindam-chattopadhya\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"HTML5 Geolocation Example - Weather Widget Demo - Web Code Geeks - 2026","description":"Interested to learn more about html5 geolocation? Check out our Example where you will learn the Geolocation capabilities of HTML5!","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.webcodegeeks.com\/html5\/html5-geolocation-example-weather-widget-demo\/","og_locale":"en_US","og_type":"article","og_title":"HTML5 Geolocation Example - Weather Widget Demo - Web Code Geeks - 2026","og_description":"Interested to learn more about html5 geolocation? Check out our Example where you will learn the Geolocation capabilities of HTML5!","og_url":"https:\/\/www.webcodegeeks.com\/html5\/html5-geolocation-example-weather-widget-demo\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_published_time":"2015-03-02T11:15:52+00:00","article_modified_time":"2018-06-20T13:07:41+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","type":"image\/jpeg"}],"author":"Arindam Chattopadhya","twitter_card":"summary_large_image","twitter_creator":"@webcodegeeks","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Arindam Chattopadhya","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-geolocation-example-weather-widget-demo\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-geolocation-example-weather-widget-demo\/"},"author":{"name":"Arindam Chattopadhya","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/78b9675665f8627e97ed2dd1fd8cdf00"},"headline":"HTML5 Geolocation Example – Weather Widget Demo","datePublished":"2015-03-02T11:15:52+00:00","dateModified":"2018-06-20T13:07:41+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-geolocation-example-weather-widget-demo\/"},"wordCount":2027,"commentCount":3,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-geolocation-example-weather-widget-demo\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","keywords":["OpenWeather"],"articleSection":["HTML5"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/html5\/html5-geolocation-example-weather-widget-demo\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-geolocation-example-weather-widget-demo\/","url":"https:\/\/www.webcodegeeks.com\/html5\/html5-geolocation-example-weather-widget-demo\/","name":"HTML5 Geolocation Example - Weather Widget Demo - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-geolocation-example-weather-widget-demo\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-geolocation-example-weather-widget-demo\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","datePublished":"2015-03-02T11:15:52+00:00","dateModified":"2018-06-20T13:07:41+00:00","description":"Interested to learn more about html5 geolocation? Check out our Example where you will learn the Geolocation capabilities of HTML5!","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-geolocation-example-weather-widget-demo\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/html5\/html5-geolocation-example-weather-widget-demo\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-geolocation-example-weather-widget-demo\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-geolocation-example-weather-widget-demo\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"HTML5","item":"https:\/\/www.webcodegeeks.com\/category\/html5\/"},{"@type":"ListItem","position":3,"name":"HTML5 Geolocation Example – Weather Widget Demo"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/78b9675665f8627e97ed2dd1fd8cdf00","name":"Arindam Chattopadhya","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/4c54fbd5748a5a51f90f73ca68fe86ae6bf8e416966a283b2c05bf15c86c4dd3?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4c54fbd5748a5a51f90f73ca68fe86ae6bf8e416966a283b2c05bf15c86c4dd3?s=96&d=mm&r=g","caption":"Arindam Chattopadhya"},"description":"Arindam has completed Masters in Information Technology. His expertise includes enterprise applications architecture, application integration, legacy connectivity, user interface engineering, systems analysis and distributed systems architecture and design. He has hand-on expertise on Java EE , web technology and mobile application development.","sameAs":["http:\/\/www.webcodegeeks.com\/"],"url":"https:\/\/www.webcodegeeks.com\/author\/arindam-chattopadhya\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/2586","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/47"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=2586"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/2586\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/914"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=2586"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=2586"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=2586"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}} - OpenWeather API<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
- If the