Como combinar Geolocation com Google Maps quando codificação com javascript

Uma das coisas mais comuns que os programadores de javascript precisa fazer com os dados de geolocalização é para exibir um local em um mapa. A fim de fazer isso, você primeiro precisa obter a latitude ea longitude. Você tem isso agora. Mas, como você desenhar o mapa e descobrir onde no mapa que latitude e longitude são? Que, ao que parece, é a tarefa assustadora.

Felizmente, existem pessoas que têm feito isso antes e que criaram uma API para interagir com seu software de mapeamento. O mais famosa, o Google faz o seu software de mapeamento disponível gratuitamente para qualquer pessoa através da API do Google Maps (mesmo para fins comerciais, na maioria dos casos).

Para usar a API do Google Maps, siga estes passos:

1. Ir para o console APIs do Google emhttps://code.google.com/apis/consolee faça login com a sua Conta Google.

2. Depois de efetuar o login, você pode ser solicitado para concordar com os termos de uso-se assim for, clique em Aceitar.

3. Clique no botão Ativar uma API.

   Sua tela agora exibe uma lista de APIs e uma caixa de pesquisa Navegar APIs.

4. Na caixa de pesquisa Navegar APIs, digite Google Maps javascript API v3.

   O link para esta API aparece.

5. Clique no botão que diz OFF sob o título de estado.

   Este passo transforma o NO API.

   Depois de ativar a API do Google Maps javascript, um ON verde aparece ao lado do API.

   
   Ativando a API do Google Maps.

6. Clique Credenciais link na barra de navegação à esquerda.

   Você verá a tela API Access.

7. Clique no link Criar nova chave.

   Criar uma caixa de diálogo New Key aparece.

8. Clique chave do navegador na caixa de diálogo Key New Criar.

   Uma caixa de diálogo que contém um campo de entrada de texto chamado Aceitar solicitações dessas Referrers HTTP abre.

9. Deixe a caixa de entrada rotulada Aceitar solicitações dessas referências HTTP em branco e clique em Criar.

   A caixa de diálogo é fechada e sua chave de API será criado.

   Na seção Acesso API pública, agora você encontrar uma longa seqüência de letras e números dentro de uma caixa Key rotulado para aplicativos de navegação. Esta é a sua chave de API.

A chave API é tudo que você precisa para ter acesso a toda a grande funcionalidade da API do Google Maps.

Agora que você tem acesso à API do Google Maps javascript, é hora de testá-lo. A página web neste exemplo obtém a localização do seu computador usando o navigator.geolocation objeto e, em seguida, passa para o Google Maps para obter um mapa.

Para que este script seja executado corretamente, você tem que substituir o YOUR_API_KEY texto com a chave API que você obteve a partir do Google.

Confira os resultados de executar esse código em um navegador.