Introdução à Google Maps API

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (9)  (0)

Veja neste artigo uma introdução à Google Maps API, usando a versão 3 da biblioteca JavaScript. Veremos o que é preciso para começar a usá-la e uma breve explicação sobre outras APIs também do Google Maps.

Olá, Tudo bem? Vamos trabalhar neste artigo uma visão introdutória da Google Maps API, de modo que serão utilizados exemplos básicos, afim que venha a despertar a curiosidade e estimular o uso da mesma em nossas aplicações.

O que é a Google Maps API?

É um serviço público e gratuito que qualquer pessoa pode usar em seus sites e aplicações. Desde que o usuário final não seja cobrado, pode usar este serviço, para isto existe a versão paga da API, mas não é o caso para este artigo que visa apenas o estudo e compreensão da mesma.

Na verdade o Google Maps possui várias API’s que podem ser incorporadas ao site/aplicação dependendo de cada caso. Vejamos na tabela abaixo essas API’s e suas descrições retiradas do site oficial da API.

APIDescrição
Google Maps JavaScript APIIncorpore um mapa do Google em sua página da web usando JavaScript. Manipule o mapa e adicione conteúdo com a ajuda de vários serviços.
Google Maps API for FlashUse essa API ActionScript para incorporar um mapa do Google na sua página da web ou aplicativo baseado em Flash. Manipule o mapa em três dimensões e adicione conteúdo com a ajuda de vários serviços.
Google Earth APIIncorpore um verdadeiro globo digital em 3D à sua página da web. Leve os seus visitantes a qualquer lugar da Terra (até mesmo nas profundezas dos oceanos) sem tirá-los de sua página da web.
Google Static Maps APIIncorpore uma imagem simples e rápida do Google Maps em sua página da web ou site para celular sem precisar de códigos JavaScript ou qualquer carregamento dinâmico de página.
Serviços da webUse solicitações de URL para acessar informações de geocodificação, rotas, elevação e lugares dos aplicativos cliente e manipule os resultados em JSON ou XML.
Google Maps Data APIVisualize, armazene e atualize dados de mapa por meio de feeds da Google Data API, usado um modelo de elementos (marcadores, linhas e formas) e coleções de elementos.

Também temos a versão mobile que não difere muito do que estudaremos.

O que podemos fazer com a Google Maps API?

Nesse artigo o objeto de nosso estudo será a API em Javascript na sua terceira versão, com a qual podemos fazer todas aquelas coisas que você vê no Google Maps, marcar pontos como nossos ícones, desenhar círculos, polígonos, desenhar trajetos dentre outros.

A API é muito grande e seria impossível descrever toda ela aqui, então vamos trabalhar o que pode ser considerado como mais relevante para uma apresentação da API.

Mas primeiro...

Antes de começarmos a brincar com nossos mapas, devemos obter uma chave de autenticação, sem ela não podemos incorporar a biblioteca JavaScript na página. Podemos conseguir a chave gratuitamente, porém ela tem suas limitações, mas nada que vá atrapalhar projetos pequenos. Podemos realizar até 25.000 requisições, está bom não é? Se você trabalha com rastreamento ferrenho, nesse caso você vai precisar da chave paga, mas aí são “outros quinhentos”.

Para obter a chave devemos:

Chave de acesso aos serviços do Google

Figura 1: Chave de acesso aos serviços do Google

Agora sim estamos prontos para começar, vamos lá.

Desenhando o mapa

Para desenhar o mapa temos que seguir basicamente três passos, são eles:

  • Incorporar a biblioteca da API do Google.
  • Designar um Elemento DOM, uma DIV, por exemplo, onde será desenhando o mapa.
  • Inserir o trecho de código JavaScript para definir as opções do mapa instanciando, por fim, um novo objeto.

Acompanhe o código da Listagem 1.

Listagem 1: Desenhando o mapa

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=coloque_sua_chave_aqui” >
    </script>
    <script type="text/javascript">
      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(-34.397, 150.644),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);
      }
    </script>
  </head>
  <body onload="initialize()">
    <div id="map_canvas" style="width:100%; height:100%"></div>
  </body>
</html>	

Ao acessar um arquivo HTML com este código veremos o mapa do Google ocupado 100% da tela, isso por que definimos nossa div “map_canvas” com altura e largura iguais a 100%.

A URL que usamos para importar a biblioteca recebeu a chave como parâmetro, esse parâmetro é obrigatório, mas ela também recebe outros parâmetros que podem ser úteis em alguns casos.

O que temos no JavaScript é a criação do nosso mapa na instancia de “google.maps.Map”, que recebe o id DOM do elemento e as opções iniciais do mapa. Usamos “center” que recebe um objeto LatLng também da API do Google que será a coordenada central, o “zoom” define a altura inicial da visualização e por fim “mapTypeId” que também recebe um tipo da Google API e diz qual será o tipo de mapa (satélite, terreno etc).

Existem muitas outras opções para iniciar o mapa e também métodos que podem alterá-las mesmo depois do mapa criado, como setZoom(), por exemplo.

Colocando um Marker

Marker’s são pontos no mapa, eles são definidos por uma posição geográfica e o ícone, sendo que este último não é obrigatório, caso não passarmos, a API colocará um padrão.

Listagem 2: Desenhando um Marker

//nova posição
var ponto = new google.maps.LatLng(-25.363882,131.044922);
var marker = new google.maps.Marker({
      position: ponto,//seta posição
      map: map,//Objeto mapa
      title:"Hello World!"//string que será exibida quando passar o mouse no marker
      //icon: caminho_da_imagem
  });

O processo não difere de desenhar um mapa, devemos definir as opções iniciais e instanciar um novo objeto Marker.

Da mesma forma que no mapa, existem muitas opções e métodos para usarmos com os marker’s.

Bem, pessoal, ficamos por aqui, mas não antes de passar os links para a documentação.

Espero que tenham gostado e tenham ficado curiosos para desvendar os caminhos do Google Maps API. Até a próxima.

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Receba nossas novidades
Ficou com alguma dúvida?