Google Maps API
maps_logo_small_blue.png

T04-Roberto,Pamella,Elton

Que tal dar a volta ao mundo sem sair do lugar?

Essa é uma das propostas da Google Maps, um serviço gratuito de visualização de mapas e rotas fornecido pela Google.

Com um navegador web e apenas alguns cliques o usuário pode dar um passeio virtual ao redor do mundo.

O que é o Google Maps

Google Maps é um serviço de mapeamento disponível gratuitamente na WEB, desde que para uso não comercial. Isso não quer dizer que uma empresa não possa colocar um aplicativo do Google Maps no site dela. Ela pode! O que não pode é restringir o acesso a este aplicativo ou colocar senhas no mesmo. Não ficou claro? Digamos que a UCSAL tenha um aplicativo do Google Maps, ela pode colocá-lo no site sem problemas, porém essa página que contém o mapa deve estar acessível a todos, sem que o usuário precise ser aluno ou estar cadastrado. Simples assim!!

Voltando à definição do Google Maps. A palavra chave dessa ferramenta é a interatividade, pois é possível clicar diversas vezes movendo-se pelo mundo, dar zoom, escolher os vários tipos de mapas disponíveis (mapa, satélite, híbrido), tudo isso sem a necessidade de recarregar a página.

É possível integrar essa aplicação gratuitamente e de forma simples para aqueles que desejam exibir um mapa em sua própria página, no entanto um dos pré-requisitos é ter conhecimentos em programação Javascript e de HTML, além de conhecer a ferramenta Google Maps, ainda que seja como um simples usuário.

Para que serve

O Google Maps oferece mapas de ruas, mapas de rotas para atingir destinos, locais especificos (como lojas, restaurantes, museus), entre outros. Tudo isso através do seu browser no site da Google e sem a necessidade de cadastros.

Como eu mexo neste troço??

Primeiro passo é entrar no site: http://maps.google.com.br/

Os controles são bem intuitivos, mas caso você não tenha entendido algum deles, vale a pena entrar no excelente guia que a própria Google criou para que os usuários possam aprender a navegar..

É só entrar aqui: http://maps.google.com.br/support/bin/answer.py?hl=br&answer=68259

Histórico

Em fevereiro de 2005 foi lançada uma versão beta do Google Maps e em pouco tempo tornou-se uma febre entre os usuários e foi considerada uma revolução na Internet.

No inicio a Google disponibilizou uma gama de mapas de cidades, bairros e ruas dos Estados Unidos. A quantidade de mapas foi aumentando com o passar do tempo e em maio de 2007 o Brasil foi incluído nesse hall de países. Em outubro do mesmo ano, foi lançada uma versão extendida em português e a consulta de endereços ficou ainda mais completa, pois essa nova versão trouxe a possibilidade de encontrar restaurantes, hotéis, traçar rotas, dentre outras vantagens.

A Google adicionou um conjunto de novos recursos ao Google Maps, o Local Bussiness Center. Nesse novo recurso é possível adicionar informações sobre o seu negócio, como fotos (ex.: da fachada, de interiores, de produtos) e vídeos, endereço, horário de funcionamento, categorias (ex.: um bar pode adicionar a categoria "happy hour" ou "fim de noite"), etc. E o melhor de tudo: é grátis e fácil de usar!

Milhões de pessoas acessam ao Google Maps diariamente. Fazer parte do mundo virtual pode trazer muitas vantagens, pois clientes em potencial podem querer saber mais sobre o seu negócio, seus produtos e seus serviços. Qualquer empresa, bar, restaurante, loja que tenha um endereço comercial pode se fazer parte do Google Maps.

API

Uma Application Programming Interface (API) é um conjunto de rotinas, padrões, estruturas de dados, classes e objetos estabelecidos por uma biblioteca de software ou por serviços de sistemas operacionais com o objetivo de dar suporte à criação de aplicativos para uma determinada tecnologia.

Uma API pode ser:
-Dependente de uma linguagem de programação, o que quer dizer que toda aplicação que precise ser construida usando esta API irá usar a linguagem na qual a API é dependente. Por exemplo, uma API dependente da linguagem JAVA. Toda aplicação que for construída usando está API deverá ser escrita em JAVA, respeitando assim a sua sintaxe, tipos de dados e todas as regras da linguagem JAVA.

-Independente de uma linguagem de programação, o que significa que ela pode ser usada atráves diversas linguagens de programação, onde a própria API se preocupa em garantir a compatibilidade.

Google Maps API

A Google criou uma API para facilitar a vida de desenvolvedores que gostariam de criar aplicativos que tivessem integração com o Google Maps sem que para isso a aplicação estivesse na servidor da Google. Atráves desta API, é possível colocar o Google Maps completo em qualquer outro site, com interfaces e funcionalidades customizadas, usando JavaScript isso.

Essa API é formada por um conjunto de classes JavaScript que fornecem uma interface para usuário construir aplicações para exibir mapas, fazer buscas de endereço, ampliar, acrescentar pontos de referência e descrições no mapa, adicionar legendas etc.

Para usar a API do Google Maps o usuário deve estar de acordo com os termos e condições de uso que está disponível no seguinte endereço:
http://code.google.com/intl/pt-BR/apis/maps/terms.html

Algumas das restrições impostas pelo Google são:
- usar o logotipo da Google para denegrir a Google, seus produtos ou seus serviços;
- mostrar o símbolo da Google em sites que contenham conteúdo adulto ou que incentivem atividades ilícitas, jogos ou a venda de tabaco ou álcool para menores de 21 anos;
- tentar remover, distorcer e/ou alterar qualquer elemento do símbolo do Google nos mapas, isso inclui comprimir, alongar, inverter, descolorir, etc.

Já sei o que é… e agora?

Agora você vai precisar de:
- Um editor simples de HTML (saber o básico de HTML e de JavaScript)
- Um domínio público (Um lugar pra colocar seu site)
- Uma API Key

O domínio deve ser público porque a Google irá monitorar a utilização do mapa e só com um domínio público para isso acontecer.

A API Key é uma chave única, formada por uma string (texto) alfanumérica, que nada mais é do que a licença de uso deste serviço. Quando você se inscreve para usar o serviço, a chave é vinculada a um domínio e um diretório no servidor. Todas as páginas que forem utilizar a API deve estar abaixo do diretório que foi usado neste cadastro.

Caso você tenha um servidor web em sua máquina, é só adquirir uma chave para testes locais, e para isso é só colocar http://localhost no campo do domínio durante o cadastro.

Para pegar a sua API Key é só entrar no site:
http://code.google.com/intl/pt-BR/apis/maps/signup.html

Opa! Fiquei fera, agora quero criar meus aplicativos..

Neste site tem um tutorial completo para criar todos os tipos de mapas
http://www.criarweb.com/desenvolvimento-google-maps/

Exemplo de código

O trecho de código abaixo foi baseado no código disponivel no site http://imasters.uol.com.br/artigo/7832/programacao/google_maps_api/ e mostra um exemplo prático de inserção da chave única, e definição de tipo de mapa

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>  
 
<!--Insira o número da sua chave após a variável "key" na querystring abaixo -->
<script src="http://maps.google.com/maps?file=api&v=2&key=sua_chave" 
type="text/javascript">
</script>
<script type="text/javascript">
// Variável irá referenciar o objeto que representa o mapa
var meuPrimeiroMapa = "";
 
// Coordenadas para o centro do mapa mundi
var centroDoMundo = new GLatLng(0,0);
 
// Nível de zoom inicial (vai de 0 a 17. Em modo satellite, as imagens 
// para alguns níveis mais altos podem não estar disponíveis)
var nivelZoom = 2;
 
// Exibe o mapa em modo satélite. as outras opções são:
// G_NORMAL_MAP e G_HYBRID_MAP 
var tipoMapa = G_SATELLITE_MAP;
</script>
 
</head>
<!-- Criamos o mapa no evento onLoad da página --!>
<body onLoad="load()">
 
<!-- Botão para reiniciar o mapa --!>
<input type="button" name="Reinicia" value="Reiniciar" onClick="reiniciar()" />
 
<!-- Div onde o mapa sera renderizado. Note que o estilo --!>
<!-- CSS define tamanho do mapa --!>
<div id="meuMapa" style="width: 500px; height: 500px"></div>
 
<!-- Funções utilizadas pelo sistema --!>
<script type="text/javascript">
// Função invocada para renderizar o mapa embutido em uma div html
function load() {
 
    // Instanciamos o objeto principal do tipo GMap2 que representa
    // o mapa, passando como argumento do contrutor o objeto DOM
    // que irá receber a renderização
    meuPrimeiroMapa = new GMap2(document.getElementById("meuMapa"));
 
    // Adicionamos um controle de zoom e de translação do mapa.
    // Uma outra opção seria GSmallMapControl para um controle
    // diminuto
    meuPrimeiroMapa.addControl(new GLargeMapControl());
 
    // Adiciona as opções de visualização do mapa.
    // As opções disponíveis são: normal, híbrido e satélite
    meuPrimeiroMapa.addControl(new GMapTypeControl());
 
    // Iniciamos o mapa com as configuações que escolhemos inicialmente
    reiniciar();
}
 
// Função para configurar alguns aspectos importantes do mapa
function reiniciar() {
 
    // Define o ponto central de vizualização do mapa,
    // bem como o nível de zoom inicial
    meuPrimeiroMapa.setCenter(centroDoMundo, nivelZoom);
 
    // Define o tipo inicial do mapa
    meuPrimeiroMapa.setMapType(tipoDoMapa);
}
</script>
</body>
</html>

O código está comentado para facilitar a compreensão. Contudo, ainda é necessário fazer algumas observações importantes:

<script src="http://maps.google.com/maps?file=api&v=2&key= INSIRA AQUI SUA API KEY"
 type="text/javascript"></script>

O endereço aponta para o local onde o arquivo Javascript se encontra. Este arquivo contém os símbolos e todas as definições que são necessárias para a utilização da API do Google Maps. A página deve ter a tag script, que deve estar apontando para o endereço citado, utilizando a API key que foi adquirida no momento da inscrição do serviço. Substitua o texto "INSIRA AQUI SUA API KEY" pelo string da chave.

<body onload="load()">
<div id="meuMapa" style="width: 500px; height: 500px"></div>
</body>

Nesse trecho de código o evento onload = load() será chamado e então a página será carregada. Logo após, o objeto MeuMapa é construído, garantindo, dessa forma, que o mapa será completamente carregado para então ser exibido na página. O mapa é mostrado a partir do elemento div, que especifica o tamanho da visualização do mapa, determinando parâmetros de largura e altura.

meuPrimeiroMapa.setCenter(centroDoMundo, nivelZoom);

Depois de criar o mapa com o construtor meuPrimeiroMapa, é necessário inicializá-lo. Para isso, utilizamos o método setCenter() do mapa. Esse método precisa das coordenadas do centro do mapa (latitude e longitude) e um nível de zoom. Essas informações são essenciais para montagem do mapa, pois indica a coordenada geográfica exata onde o mapa vai estar.

meuPrimeiroMapa.setMapType(tipoDoMapa);

É onde especificamos o tipo de mapa que queremos visualizar, no caso foi escolhido a vista de imagens de satélite(G_SATELLITE_MAP), igual às imagens do Google Earth. A API do Google Maps oferece, por padrão, três tipos de mapas: G_NORMAL_MAP, que é o default, mostra o mapa político: países, cidades, bairros, ruas, etc; G_HYBRID_MAP, que combina a vista de satélite(G_SATELLITE_MAP) com a vista normal (G_NORMAL_MAP) e a G_SATELLITE_MAP, citada anteriormente.

Ótimo! Li tudo e continuo sem entender nada!!

Não tem problema, arrume uns 45 minutos e assista este vídeo feito por quem mais conhece a API!

Hummm.. esse Local Bussiness Center poderia ser bom para empresa que eu trabalho!!

Gostou? Então saiba mais neste vídeo:

Tem mais??

Claro! Tem o uso do Google Maps para o transporte público.. olha só esse vídeo:

Links Externos

Monte seu mapa reunindo diversas ferramentas já prontas

Home da google sobre a API do Google Maps

Sites que utilizam variações do Google Maps

Até os políticos usam Google Maps para campanha

Esse site ensina como usar e ainda tem um exemplo do uso

O google Maps para transporte público

Bibliografia

http://code.google.com/intl/pt-BR/apis/maps/documentation/
http://www.criarweb.com/artigos/basico-comecar-desenvolver-google-maps.html
http://googlemapsmania.blogspot.com/
http://code.google.com/apis/ajax/playground/?exp=maps#ready_event
LEWIS, PURVIS, SAMBELLS, TURNER, Beginning Google Maps Applicaions Rails and Ajax: From Novice to Professional, Apress, 2007

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License