{"id":1180,"date":"2012-04-12T14:52:53","date_gmt":"2012-04-12T14:52:53","guid":{"rendered":"http:\/\/truelogic.org\/wordpress\/?p=1180"},"modified":"2012-04-12T14:52:53","modified_gmt":"2012-04-12T14:52:53","slug":"how-to-make-your-website-location-aware","status":"publish","type":"post","link":"https:\/\/truelogic.org\/wordpress\/2012\/04\/12\/how-to-make-your-website-location-aware\/","title":{"rendered":"How to make your website Location-Aware"},"content":{"rendered":"            <script type=\"text\/javascript\" src=\"https:\/\/truelogic.org\/wordpress\/wp-content\/plugins\/wordpress-code-snippet\/scripts\/shBrushJScript.js\"><\/script>\n            <script type=\"text\/javascript\" src=\"https:\/\/truelogic.org\/wordpress\/wp-content\/plugins\/wordpress-code-snippet\/scripts\/shBrushXml.js\"><\/script>\n<p>These days with web apps being run on tablets and smartphones, location-awareness is becoming of a preferable feature to have. Instead of an app asking the user to enter his location, the app finds it on its own.<\/p>\n<p>The most reliable way of finding a user&#8217;s location in terms of latitude\/longitude was using the Google Geolocation API, which was part of Google Gears. which unfortunately has been discontinued some months back.<a href=\"https:\/\/truelogic.org\/wordpress\/2012\/04\/12\/how-to-make-your-website-location-aware\/geolocation\/\" rel=\"attachment wp-att-1191\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-full wp-image-1191\" title=\"geolocation\" src=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2012\/04\/geolocation.jpeg\" alt=\"\" width=\"180\" height=\"168\" \/><\/a><\/p>\n<p>However, geolocation still works if you are using Google Maps. And again it is NOT necessary to have to display a google map just because you want to do a geolocation call.<\/p>\n<p>We are just using Google Maps to use its geolocation features.<\/p>\n<p>The sample javascript is below:<br \/>\n<pre class=\"brush: js\">&lt;script src=&quot;http:\/\/maps.google.com\/maps\/api\/js?sensor=false&quot;&gt;\r\n&lt;\/script&gt;\r\n&lt;script type=&quot;text\/javascript&quot;&gt;\r\n\tfunction doLocation() {\r\n   \t\t if (navigator.geolocation) {\r\n\t\t        navigator.geolocation.getCurrentPosition(function(position){\r\n\t\t        var latitude = position.coords.latitude;\r\n\t\t        var longitude = position.coords.longitude;\r\n\t\t\t\tvar fld = document.getElementById(&quot;address&quot;);\r\n\t\t\t\tif (fld) {\r\n\t\t\t\t\tfld.value = &quot;(&quot; + latitude + &quot;,&quot; + longitude + &quot;)&quot;;\r\n\t\t\t\t}\t\r\n\t\t        var coords = new google.maps.LatLng(latitude, longitude);\r\n\t\t        var mapOptions = {\r\n\t\t            zoom: 15,\r\n\t\t            center: coords,\r\n\t\t            mapTypeControl: true,\r\n        \t\t    navigationControlOptions: {\r\n\t\t                style: google.maps.NavigationControlStyle.SMALL\r\n\t\t            },\r\n\t\t            mapTypeId: google.maps.MapTypeId.ROADMAP\r\n\t\t            };\r\n\t\t            map = new google.maps.Map(\r\n\t\t                document.getElementById(&quot;mp&quot;), mapOptions\r\n\t\t                );\r\n\t\t            var marker = new google.maps.Marker({\r\n        \t\t            position: coords,\r\n\t\t                    map: map,\r\n\t\t                    title: &quot;Your current location!&quot;\r\n\t            });\r\n \r\n    \t\t   });\r\n\t    }else {\r\n    \t    alert(&quot;Geolocation API is not supported in your browser.&quot;);\r\n\t    }\r\n\t}\t\t\r\n&lt;\/script&gt;<\/pre><\/p>\n<p>The front end script shown below:<br \/>\n<pre class=\"brush: xml\">&lt;style type=&quot;text\/css&quot;&gt;\r\n#mp {\r\n    height: 0px;\r\n    width: 0px;\r\n}\r\n&lt;\/style&gt;\r\n\r\n&lt;div id=&quot;mp&quot;&gt;&lt;\/div&gt;<\/pre><\/p>\n<ul>\n<li>In the javascript function, it is assumed there is a textbox called &#8216;address&#8217;, which will be assigned the lat\/long value obtained from the geolocation call. Once you have the coordinates, you can assign it to anything you want.<\/li>\n<li>The div which will hold the google map has been given a width and height of zero, so it does not show. If you need a map then you can give it height and width and position.<\/li>\n<li>The function doLocation can be called at page load or on some click event in the page.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<div class=\"mh-excerpt\"><p>These days with web apps being run on tablets and smartphones, location-awareness is becoming of a preferable feature to have. Instead of an app asking <a class=\"mh-excerpt-more\" href=\"https:\/\/truelogic.org\/wordpress\/2012\/04\/12\/how-to-make-your-website-location-aware\/\" title=\"How to make your website Location-Aware\">[&#8230;]<\/a><\/p>\n<\/div>","protected":false},"author":1,"featured_media":1191,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18,7,10,11],"tags":[],"class_list":["post-1180","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","category-maps","category-programming","category-tutorials"],"_links":{"self":[{"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/posts\/1180","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/comments?post=1180"}],"version-history":[{"count":26,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/posts\/1180\/revisions"}],"predecessor-version":[{"id":1207,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/posts\/1180\/revisions\/1207"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/media\/1191"}],"wp:attachment":[{"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/media?parent=1180"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/categories?post=1180"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/tags?post=1180"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}