{"id":7545,"date":"2018-04-09T16:00:57","date_gmt":"2018-04-09T19:00:57","guid":{"rendered":"https:\/\/www.mxcursos.com\/blog\/?p=7545"},"modified":"2021-08-19T17:00:50","modified_gmt":"2021-08-19T20:00:50","slug":"aprenda-geolocalizacao-com-html5","status":"publish","type":"post","link":"https:\/\/www.mxcursos.com\/blog\/aprenda-geolocalizacao-com-html5\/","title":{"rendered":"Aprenda a utilizar o API de geolocaliza\u00e7\u00e3o com HTML5"},"content":{"rendered":"<p>Se voc\u00ea busca <strong>aprender como utilizar a API de geolocaliza\u00e7\u00e3o com HTML5<\/strong>, voc\u00ea est\u00e1 no lugar certo!<\/p>\n<p>A partir do <a href=\"https:\/\/www.mxcursos.com\/blog\/tags\/html5\/\">HTML5<\/a>, foi introduzida a API de Geolocaliza\u00e7\u00e3o, possibilitando retornar suas coordenadas, como latitude e longitude. Sendo assim, imagine a possibilidade de informar a dist\u00e2ncia do cliente at\u00e9 a loja? Ou informar sua posi\u00e7\u00e3o para ele conseguir se localizar?<\/p>\n<p>Ah, se voc\u00ea quiser aprender mais sobre HTML5, CSS3, Javascript e jQuery, <a href=\"https:\/\/www.mxcursos.com\/front-end?tracking=blog&amp;utm_source=blog&amp;utm_medium=post_link&amp;utm_content=marketing\">conhe\u00e7a nossos cursos online de Front-End<\/a>.<\/p>\n<p>Voc\u00ea pode pensar que isso \u00e9 poss\u00edvel apenas em aplicativos para smartphones. Por\u00e9m, e se voc\u00ea conseguisse fazer isso em seu site?<\/p>\n<p>Primeiro voc\u00ea precisa entender que a geolocaliza\u00e7\u00e3o \u00e9 capacidade de informar suas coordenadas e pode conseguir recuperar essas informa\u00e7\u00f5es atrav\u00e9s do IP, GPS, Conex\u00e3o de Wifi, etc.<\/p>\n<p>Mas qualquer um pode pegar minhas coordenadas? Como isso envolve a privacidade do usu\u00e1rio, ser\u00e1 sempre solicitado a permiss\u00e3o para que o usu\u00e1rio possa utilizar a API de Geolocaliza\u00e7\u00e3o.<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-7566 size-full\" title=\"Autoriza\u00e7\u00e3o - Utilizar o API de geolocaliza\u00e7\u00e3o com HTML5\" src=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2017\/12\/blog-geolocalizacao.jpg\" alt=\"Autoriza\u00e7\u00e3o - Utilizar o API de geolocaliza\u00e7\u00e3o com HTML5\" width=\"319\" height=\"121\" srcset=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2017\/12\/blog-geolocalizacao.jpg 319w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2017\/12\/blog-geolocalizacao-24x9.jpg 24w\" sizes=\"(max-width: 319px) 100vw, 319px\" \/><\/p>\n<p>Certamente voc\u00ea consegue pegar esses dados via Javascript, e com eles, exibir a posi\u00e7\u00e3o do usu\u00e1rio, dist\u00e2ncias e at\u00e9 endere\u00e7o, atrav\u00e9s de servi\u00e7os externos.<\/p>\n<p>Antes de utilizar, voc\u00ea precisa verificar se o recurso de geolocaliza\u00e7\u00e3o do navegador do usu\u00e1rio est\u00e1 dispon\u00edvel, para isso voc\u00ea pode testar:<\/p>\n<pre class=\"lang:js decode:true \">if( !('geolocation' in navigator) ) {\r\n    alert(\"Navegador n\u00e3o tem suporte API Geolocation\");\r\n}<\/pre>\n<p>Consequentemente, para retornar a posi\u00e7\u00e3o atual do usu\u00e1rio, pode utilizar o m\u00e9todo <strong>getCurrentPosition<\/strong>:<\/p>\n<pre class=\"lang:js decode:true\">navegator.geolocation.getCurrentPosition(success, error, PositionOptions);<\/pre>\n<p>Ele receber\u00e1 3 par\u00e2metros: um <strong>callback<\/strong> quando retornar corretamente, um <strong>callback<\/strong> se ocorrer erro, e um objeto <strong>PositionOptions,\u00a0<\/strong>que ter\u00e3o as seguintes op\u00e7\u00f5es:<\/p>\n<ul>\n<li>o <strong>enableHighAccuracy <\/strong>(indica se deseja receber os resultados mais precisos, podem ter respostas mais lentes, ele recebe um valor booleano;<\/li>\n<li>o <strong>timeout<\/strong>\u00a0(tempo que o dispositivo demora para retornar uma posi\u00e7\u00e3o, recebe um valor em milissegundos);<\/li>\n<li>o <strong>maximumAge<\/strong>\u00a0(a poss\u00edvel posi\u00e7\u00e3o de um cache ou posi\u00e7\u00e3o atual, recebe o valor m\u00e1ximo em\u00a0milissegundos).<\/li>\n<\/ul>\n<p>Se voc\u00ea precisa da posi\u00e7\u00e3o enquanto tiver altera\u00e7\u00e3o, como movimenta\u00e7\u00e3o do dispon\u00edvel, voc\u00ea pode utilizar o m\u00e9todo\u00a0<strong>watchPosition<\/strong><\/p>\n<pre class=\"lang:default decode:true \">navegator.geolocation.watchPosition(success, error, PositionOptions);\r\n<\/pre>\n<p>Outra coisa importane, \u00e9 que os par\u00e2metros s\u00e3o os mesmos do <strong>getCurrentPosition<\/strong>. S\u00f3 que m\u00e9todo <strong>watchPosition<\/strong>, retorna um <strong>id<\/strong>, caso precise cancelar o monitoramento, para isso basta passar o id pra o m\u00e9todo <strong>clearWatch.<\/strong><\/p>\n<h2>Pr\u00e1tica &#8211; Geolocaliza\u00e7\u00e3o<\/h2>\n<p>Primeiramente vamos criar uma p\u00e1gina, onde ser\u00e1 solicitado a utiliza\u00e7\u00e3o da <strong>API Geolocation<\/strong>, e com esses dados, mostrar no mapa, usando o Google Maps, a posi\u00e7\u00e3o dele.<\/p>\n<p>Ent\u00e3o criaremos o arquivo <strong>index.html<\/strong><\/p>\n<pre class=\"lang:xhtml decode:true\">&lt;!DOCTYPE html&gt;\r\n&lt;html lang=\"pt-br\"&gt;\r\n&lt;head&gt;\r\n    &lt;meta charset=\"UTF-8\"&gt;\r\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\r\n    &lt;meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\"&gt;\r\n    &lt;title&gt;GeoLocaliza\u00e7\u00e3o&lt;\/title&gt;\r\n    &lt;style type=\"text\/css\"&gt;\r\n            html, body, #map { height: 100%; margin: 0; }\r\n      &lt;\/style&gt;\r\n    &lt;script src=\"http:\/\/maps.google.com\/maps\/api\/js?sensor=false\"&gt;&lt;\/script&gt;\r\n    &lt;script src=\"js\/map.js\"&gt;&lt;\/script&gt;\r\n   \r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n    &lt;div id=\"map\"&gt;&lt;\/div&gt;  \r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<ul>\n<li>Na linha 9 definimos o CSS, onde vamos deixar que paga ocupe 100% de altura. Por isso \u00e9 definido tamb\u00e9m para o html e o body, al\u00e9m da <strong>div#map,<\/strong> onde ser\u00e1 exibido o mapa;<\/li>\n<li>Depois disso, na linha 11\u00a0 inclu\u00edmos o script da API do Google Maps;<\/li>\n<li>J\u00e1 na linha 12 inclu\u00edmos o script <strong>map.js,<\/strong> que ir\u00e1 ser respons\u00e1vel por recuperar os dados da <strong>API Geolocation<\/strong>.<\/li>\n<li>Na linha 16 \u00e9 definido a <strong>div#map<\/strong> onde ser\u00e1 exibido o mapa.<\/li>\n<\/ul>\n<p>Agora criaremos o script para resgatar as informa\u00e7\u00f5es da localiza\u00e7\u00e3o e exibir no mapa.<\/p>\n<p>Para uma melhor compreens\u00e3o, ser\u00e1 adicionado cada parte e ser\u00e1 explicado, no final ter\u00e1 o arquivo completo:<\/p>\n<pre class=\"lang:js decode:true \">document.addEventListener('DOMContentLoaded', function(){\r\n  \r\n});<\/pre>\n<p>Na linha 1 adicione o evento <strong>DOMContentLoaded<\/strong>, que ir\u00e1 executar o c\u00f3digo s\u00f3 ap\u00f3s carregar o DOM da p\u00e1gina;<\/p>\n<pre class=\"lang:js decode:true \">document.addEventListener('DOMContentLoaded', function(){\r\n\r\n    var target = document.querySelector('#map');\r\n    \r\n});<\/pre>\n<p>Na linha 3, criamos uma vari\u00e1vel <strong>target<\/strong>, que recebe <strong>querySelector<\/strong> retornando <strong>div#map<\/strong><\/p>\n<pre class=\"lang:default decode:true \">document.addEventListener('DOMContentLoaded', function(){\r\n\r\n    var target = document.querySelector('#map');\r\n    \r\n    navigator.geolocation.getCurrentPosition(function(position) {\r\n        \r\n       \r\n    });\r\n});<\/pre>\n<p>Na linha 5 use o <strong>geolocation<\/strong>, com o m\u00e9todo <strong>getCurrentPosition, <\/strong>que recebe uma<strong> fun\u00e7\u00e3o an\u00f4nima<\/strong> com par\u00e2metro <strong>position<\/strong>, que ir\u00e1 retornar os dados da posi\u00e7\u00e3o do usu\u00e1rio.<\/p>\n<pre class=\"lang:js decode:true\">document.addEventListener('DOMContentLoaded', function(){\r\n\r\n    var target = document.querySelector('#map');\r\n    \r\n    navigator.geolocation.getCurrentPosition(function(position) {\r\n        \r\n        var latitude   = position.coords.latitude;\r\n        var longitude  = position.coords.longitude;\r\n        var coordinate = new google.maps.LatLng(latitude, longitude);\r\n\r\n\r\n    });\r\n});<\/pre>\n<ul>\n<li>J\u00e1 na linha 7 crie a vari\u00e1vel <strong>latitude<\/strong>, que vai receber a latitude retornado do par\u00e2metro <strong>position<\/strong> do callback;<\/li>\n<li>E na linha 8 crie a vari\u00e1vel <strong>longitude<\/strong>, que vai\u00a0 receber a longitude retornado do par\u00e2metro <strong>position<\/strong> do callback;<\/li>\n<li>Na linha 9 crie a vari\u00e1vel <strong>coordinate<\/strong>, que vai receber a instancia da classe <strong>google.maps.LatLng<\/strong>, que passamos a latitude e longitude para o construtor.<\/li>\n<\/ul>\n<pre class=\"lang:js decode:true\">document.addEventListener('DOMContentLoaded', function(){\r\n\r\n    var target = document.querySelector('#map');\r\n    \r\n    navigator.geolocation.getCurrentPosition(function(position) {\r\n        \r\n        var latitude   = position.coords.latitude;\r\n        var longitude  = position.coords.longitude;\r\n        var coordinate = new google.maps.LatLng(latitude, longitude);\r\n\r\n        var optionsMap = {\r\n                    center : coordinate,\r\n                    zoom: 19,\r\n                    mapTypeId: google.maps.MapTypeId.ROADMAP\r\n        };\r\n\r\n        var map = new google.maps.Map(target, optionsMap);\r\n\r\n       \r\n\r\n    });\r\n});<\/pre>\n<ul>\n<li>Agora, na linha 11, crie uma vari\u00e1vel <strong>optionsMap<\/strong>, que recebe um objeto;<\/li>\n<li>Na linha 12 defina o atributo <strong>center<\/strong> com a instancia da classe <strong>google.maps.LatLng<\/strong>;<\/li>\n<li>Depois, na linha 13 defina o <strong>zoom<\/strong> com valor <strong>19<\/strong>;<\/li>\n<li>Na linha 14 defina o\u00a0<strong>mapTypeId<\/strong>, com\u00a0<strong>google.maps.MapTypeId.ROADMAP<\/strong> que \u00e9 o tipo do mapa;<\/li>\n<li>Na linha 17 crie uma vari\u00e1vel <strong>map<\/strong> que recebe a instancia da classe <strong>google.maps.Ma<\/strong>p, que recebe onde ser\u00e1 exibido o mapa, e as op\u00e7\u00f5es de configura\u00e7\u00e3o do mapa. Lembrando que as propriedades <strong>center<\/strong> e <strong>zoom<\/strong>, s\u00e3o obrigat\u00f3rias.<\/li>\n<\/ul>\n<pre class=\"lang:js decode:true\">document.addEventListener('DOMContentLoaded', function(){\r\n\r\n    var target = document.querySelector('#map');\r\n    \r\n    navigator.geolocation.getCurrentPosition(function(position) {\r\n\r\n        var latitude   = position.coords.latitude;\r\n        var longitude  = position.coords.longitude;\r\n        var coordinate = new google.maps.LatLng(latitude, longitude);\r\n\r\n        var optionsMap = {\r\n                    center : coordinate,\r\n                    zoom: 19,\r\n                    mapTypeId: google.maps.MapTypeId.ROADMAP\r\n        };\r\n\r\n        var map = new google.maps.Map(target, optionsMap);\r\n\r\n        var configMarker = {\r\n                             position : coordinate,\r\n                             map : map,\r\n                             title: \"Voc\u00ea est\u00e1 aqui!\"\r\n                            };\r\n\r\n        var marker = new google.maps.Marker(configMarker);\r\n\r\n    });\r\n});<\/pre>\n<ul>\n<li>Na linha 19 crie uma vari\u00e1vel <strong>configMarker<\/strong> que recebe um objeto para adicionar uma marca\u00e7\u00e3o de posi\u00e7\u00e3o no mapa;<\/li>\n<li>Na linha 20 defina a propriedade <strong>position<\/strong>, que receber as coordenadas, que \u00e9 a instancia da classe\u00a0<strong>google.maps.LatLng<\/strong>;<\/li>\n<li>Na linha 21 defina a propriedade <strong>map<\/strong>, que recebe a instancia da classe <strong>google.maps.Map;<\/strong><\/li>\n<li>Na linha 22 defina a propriedade <strong>title<\/strong> que recebe o valor <strong>&#8220;Voc\u00ea est\u00e1 aqui!&#8221;<\/strong>;<\/li>\n<li>Na linha 25 crie uma vari\u00e1vel <strong>marker<\/strong> que recebe a instancia da classe<strong> google.maps.Marker, q<\/strong>ue recebe o objeto <strong>configMarker<\/strong> com as configura\u00e7\u00f5es.<\/li>\n<\/ul>\n<p>Veja o exemplo nessa p\u00e1gina:<\/p>\n<p><a href=\"https:\/\/www.mxcursos.com\/blog\/exemplos\/geolocalizacao\/\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/www.mxcursos.com\/blog\/exemplos\/geolocalizacao\/<\/a><\/p>\n<h2>Observa\u00e7\u00f5es<\/h2>\n<p>\u00c9 necess\u00e1rio voc\u00ea executar num servidor <strong>http<\/strong>. Localmente voc\u00ea conseguir\u00e1 testar, na sua hospedagem a conex\u00e3o precisa estar em https.<\/p>\n<p>Caso n\u00e3o apare\u00e7a o mapa quando criar, precisar\u00e1 habilitar o aplicativo no google, gerar uma chave e adicionar com par\u00e2metro <strong>key.<\/strong><\/p>\n<pre class=\"lang:xhtml decode:true \">&lt;script src=\"\/\/maps.google.com\/maps\/api\/js?key=_SUA_CHAVE_API_&amp;sensor=false\"&gt;&lt;\/script&gt;\r\n<\/pre>\n<p>Para conseguir ter acesso a essa chave, voc\u00ea pode seguir a documenta\u00e7\u00e3o :<\/p>\n<p><a href=\"https:\/\/developers.google.com\/maps\/documentation\/javascript\/get-api-key?hl=pt-br\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/developers.google.com\/maps\/documentation\/javascript\/get-api-key?hl=pt-br<\/a><\/p>\n<p>Ah, se voc\u00ea quiser aprender mais sobre HTML5, CSS3, Javascript e jQuery, <a href=\"https:\/\/www.mxcursos.com\/front-end?tracking=blog&amp;utm_source=blog&amp;utm_medium=post_link&amp;utm_content=marketing\">conhe\u00e7a nossos cursos online de Front-End<\/a>.<\/p>\n<h2>\u00a0Concluindo<\/h2>\n<p>Com API Geolocation voc\u00ea tem um mundo de possibilidades, claro que voc\u00ea poder\u00e1 ter que contratar servi\u00e7os ou utilizar servi\u00e7os gratuitos, como para conseguir o endere\u00e7o usar o servi\u00e7o\u00a0<a href=\"https:\/\/www.openstreetmap.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">openstreetmap<\/a>, ou calcular dist\u00e2ncia entre dois pontos e usar o servi\u00e7o do Google como\u00a0\u00a0<a href=\"https:\/\/developers.google.com\/maps\/documentation\/javascript\/distancematrix?hl=pt-br\" target=\"_blank\" rel=\"noopener noreferrer\">Distance Matrix do Google<\/a>\u00a0para mapear essa dist\u00e2ncia.<\/p>\n<p>Experimente, teste, utilize, e sempre busque d\u00e1 uma melhor experi\u00eancia para seus usu\u00e1rios. Espero que tenham gostado e at\u00e9 a pr\u00f3xima.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Se voc\u00ea busca aprender como utilizar a API de geolocaliza\u00e7\u00e3o com HTML5, voc\u00ea est\u00e1 no lugar certo! A partir do HTML5, foi introduzida a API de Geolocaliza\u00e7\u00e3o, possibilitando retornar suas coordenadas, como latitude e longitude. Sendo assim, imagine a possibilidade de informar a dist\u00e2ncia do cliente at\u00e9 a loja? Ou informar sua posi\u00e7\u00e3o para ele [&hellip;]<\/p>\n","protected":false},"author":67,"featured_media":19059,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[678],"tags":[1282,1200],"class_list":["post-7545","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desenvolvimento","tag-api","tag-html5"],"_links":{"self":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts\/7545","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/users\/67"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/comments?post=7545"}],"version-history":[{"count":0,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts\/7545\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/media\/19059"}],"wp:attachment":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/media?parent=7545"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/categories?post=7545"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/tags?post=7545"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}