GOOGLE MAPS
O Google dispensa comentários com todas as inovações que ele faz. Hoje falaremos um pouco sobre a API do Google Maps. API (Application Programming Interface ou Interface de Programação de Aplicativos) é a forma que temos de nos comunicar com as funções pré-programadas definidas pelo fornecedor, no caso, Google. Esta API permite a criação de mapas com locais definidos, controle de zoom, tipos de mapa, geração de rotas, pesquisa por estabelecimentos, e muitas coisas mais.
Esta ferramenta além de nos socorrermos com as nossas localizações, proximidades, localizações comerciais, serviços, entre outros, também podemos traçar nossas rotas, com acessos a caminhos mais fáceis ao nosso destino.
Pode ainda funcionar com um GPS, inclusive podendo ser criados mapas offline gerados previamente para serem usados posteriormente, este assunto será tratado de uma forma direcionada.
Mas, nós também podemos contribuir com a geração de localidades e mapas descritos a serem inclusos no Google Maps. Veremos a seguir abaixo sobre o aplicativo de programação interface.
Introdução à Google Maps API
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 API do Google Maps, 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.
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:
- Ter uma conta do Google.
- Acessar esse link: Gerenciador de Biblioteca API.
- Ativar a Google Maps API v3.
- A gora em API Access você pode pegar a sua chave, veja a Figura 1.
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, dê uma passada antes nos links abaixos para a documentação.
Opções do Mapa
Opções de Marker
API Reference
Espero que tenham gostado e tenham ficado curiosos para desvendar os caminhos do
Google Maps API. Até a próxima.
Fonte: http://www.devmedia.com.br
