Obtenha as coordenadas do cliente com a API do Google Maps em JavaScript (HMTL5, CSS3 e Bootstrap)

Que necessitamos?

para) Conhecimentos básicos em html, css3, javascript e bootstrap (não limitativo).
b) Um editor de código (no meu caso usarei o Sublime text 3).
c) Um servidor local para testar (estarei usando o servidor Xampp)
Vamos começar …

Passo 1

Vamos para o diretório do nosso servidor local, no meu caso "C: / xampp / htdocs /" e vamos criar uma nova pasta que chamarei "Tutorial_geolocalizacion", dentro disso vamos adicionar mais 2 chamadas "Css" Y "Js".

PROLONGAR

Passo 2

Vamos abrir nosso editor de código e vamos "Arquivo> Novo" e escrevemos uma estrutura html5 nele.

PROLONGAR

Em seguida, salvamos esse novo arquivo como "index.html" na raiz da pasta "tutorial_geolocalizacion".

etapa 3

Baixamos o bootstrap de sua página oficial e copiamos o arquivo "Bootstrap.min.css" em nossa pasta css.

PROLONGAR

Passo 4

Voltamos ao nosso editor e adicionamos a referência a este arquivo em nosso "Index.html".

PROLONGAR

Etapa 5

Vamos criar um novo arquivo e chamá-lo "Style.css" vamos salvá-lo na pasta css …

PROLONGAR

Etapa 6

Vamos adicionar no index.html as referências ao arquivo css criado na etapa anterior. Além disso, também incluiremos um script online que contém o API JavaScript do Google Maps.

PROLONGAR

Etapa 7

Também teremos que criar um novo arquivo .js onde escreveremos a função que fará a geolocalização e mostrará o mapa, vamos salvá-lo na pasta "js", chamarei de "localiza.js". Também adicionarei uma referência a ele no index.html

PROLONGAR

PROLONGAR

Agora vamos completar o layout do nosso HTML, você pode ver o código na seguinte imagem:

PROLONGAR

Etapa 8

Ja que ele será o quadro principal e o irá conter o mapa então teremos que controlar o tamanho e as características que eles terão, para isso escreveremos em nosso arquivo "Style.css" o código a seguir.

PROLONGAR

Com isso informamos ao navegador que a camada # map-canvas terá uma margem automática, altura de 420 pixels, posição relativa e largura de 100% da camada ou div que a contém, neste caso ela está dentro de uma div com a classe .container, que estamos dizendo para ocupar 90% da tela do dispositivo e mostrá-lo centralizado horizontalmente.
Se o virmos em nosso navegador, o resultado até agora seria este …

PROLONGAR

Até agora só temos o design, mas está faltando o mais importante, o mapa, vamos lá …

Etapa 9

No arquivo "localiza.js" criaremos uma nova função que obterá as coordenadas do navegador do cliente e indicará sua localização aproximada no mapa. Caso a API não funcione corretamente no cliente, definiremos algumas coordenadas padrão e também inclui a capacidade do cliente de arrastar o espaço reservado para seu local real. Eu explico passo a passo no código, vamos ver …

PROLONGAR

Já que temos nossos arquivos prontos podemos fazer um teste em nosso servidor local e o resultado seria o seguinte.

PROLONGAR

Etapa 10

Agora vamos tornar nosso mapa adaptável a dispositivos móveis, para conseguir isso voltamos ao nosso arquivo "style.css" e vamos adicionar alguns novos seletores chamados media querys com eles definiremos como nosso design se comportará de acordo com o tamanho da tela onde está visualizando … Vamos lá.

PROLONGAR

Já temos tudo o que precisamos, agora vamos ver os resultados emulando dispositivos móveis, para isso podemos usar "Google Chrome", tendo nosso aplicativo aberto no navegador, clicamos com o botão direito e vamos para "Inspecionar elemento".

PROLONGAR

Uma janela como a que está abaixo se abrirá e selecionaremos a ferramenta no formato de um telefone celular no canto inferior esquerdo …

PROLONGAR

Você verá que no canto superior esquerdo haverá um seletor com o rótulo "Dispositivo" se mostrarmos onde diz “” Podemos ver uma lista com os nomes dos dispositivos móveis cujos tamanhos de tela são mais comuns, se selecionarmos cada um deles podemos ver como nosso design se comportará nas telas desses dispositivos, qualquer erro que virmos pode ser corrigido com a mídia consultas que adicionamos em nosso arquivo "Style.css", para isso teríamos apenas que fazer os ajustes necessários dentro da consulta de mídia que representa o tamanho do dispositivo em que percebemos o problema …
Vamos ver como nosso design atual fica em alguns celulares …

Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo