{"id":702,"date":"2014-06-26T11:09:53","date_gmt":"2014-06-26T11:09:53","guid":{"rendered":"http:\/\/blog.silverterra.net\/?p=702"},"modified":"2014-06-27T11:10:55","modified_gmt":"2014-06-27T11:10:55","slug":"simple-geo-location","status":"publish","type":"post","link":"https:\/\/blog.silverterra.net\/?p=702","title":{"rendered":"simple geo location"},"content":{"rendered":"<blockquote><p>Goal: how can I use the geo location<\/p><\/blockquote>\n<p>This is a simple code copy from: <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Geolocation\/Using_geolocation\" target=\"_blank\">click to visit<\/a><br \/>\nI&#8217;ve modified the code to put a marker to the center:<\/p>\n<pre data-enlighter-language=\"js\" class=\"EnlighterJSRAW\">\r\n    img.src = &quot;http:\/\/maps.googleapis.com\/maps\/api\/staticmap?center=&quot; + latitude + &quot;,&quot; + longitude + an +&quot;zoom=15&amp;size=300x300&amp;sensor=false&amp;markers=color:blue|label:You|&quot; + latitude + &quot;,&quot; + longitude + &quot;&quot;;\r\n<\/pre>\n<p>&#8230; and you will see a blue marker at the ecenter of the map&#8230;<\/p>\n<pre data-enlighter-language=\"js\" class=\"EnlighterJSRAW\">\r\nfunction geoFindMe() {\r\n  var output = document.getElementById(&quot;out&quot;);\r\n\r\n  if (!navigator.geolocation){\r\n    output.innerHTML = &quot;&lt;p&gt;Geolocation is not supported by your browser&lt;\/p&gt;&quot;;\r\n    return;\r\n  }\r\n\r\n  function success(position) {\r\n    var latitude  = position.coords.latitude;\r\n    var longitude = position.coords.longitude;\r\n\r\n    output.innerHTML = '&lt;p&gt;Latitude is ' + latitude + '\u00b0 &lt;br&gt;Longitude is ' + longitude + '\u00b0&lt;\/p&gt;';\r\n\r\n    var img = new Image();\r\n    img.src = &quot;http:\/\/maps.googleapis.com\/maps\/api\/staticmap?center=&quot; + latitude + &quot;,&quot; + longitude + &quot;&amp;zoom=13&amp;size=300x300&amp;sensor=false&quot;;\r\n\r\n    output.appendChild(img);\r\n  };\r\n\r\n  function error() {\r\n    output.innerHTML = &quot;Unable to retrieve your location&quot;;\r\n  };\r\n\r\n  output.innerHTML = &quot;&lt;p&gt;Locating\u2026&lt;\/p&gt;&quot;;\r\n\r\n  navigator.geolocation.getCurrentPosition(success, error);\r\n}\r\n<\/pre>\n<p><button onclick=\"geoFindMe()\">Show my location<\/button><\/p>\n<div id=\"out\"><\/div>\n<p><script type=\"text\/javascript\">\nfunction geoFindMe() {\n  var output = document.getElementById(\"out\");\n  if (!navigator.geolocation){\n    output.innerHTML = \"Geolocation is not supported by your browser\";\n    return;\n  }\n  function success(position) {\n    var latitude  = position.coords.latitude;\n    var longitude = position.coords.longitude;\n    var la = String.fromCharCode(60);\n    output.innerHTML = 'Latitude: ' + latitude + '\u00b0 <br \/>Longitude: ' + longitude + '\u00b0' + la + 'br>' + la + 'br>';\n    var img = new Image(690,300),\n        an = String.fromCharCode(38);\n    img.src = \"http:\/\/maps.googleapis.com\/maps\/api\/staticmap?center=\" + latitude + \",\" + longitude + an +\"zoom=15\"+an +\"size=690x300\"+an +\"sensor=false\"+an+\"markers=color:blue|label:You|\" + latitude + \",\" + longitude + \"\";\n    output.appendChild(img);\n  };\n  function error() {\n    output.innerHTML = \"Unable to retrieve your location\";\n  };\n  output.innerHTML = \"Locating\u2026\";\n  navigator.geolocation.getCurrentPosition(success, error);\n}<\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Goal: how can I use the geo location This is a simple code copy from: click to visit I&#8217;ve modified the code to put a marker to the center: &#8230; and you will see a blue marker at the ecenter of the map&#8230; Show my location<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[],"class_list":["post-702","post","type-post","status-publish","format-standard","hentry","category-html5"],"_links":{"self":[{"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/posts\/702","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=702"}],"version-history":[{"count":1,"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/posts\/702\/revisions"}],"predecessor-version":[{"id":703,"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/posts\/702\/revisions\/703"}],"wp:attachment":[{"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=702"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=702"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=702"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}