Google Maps API - Parte 1 - Gerando mapas estáticos (apenas imagens)
Autor: Gabriel | Publicado: 2011-05-28T18:26:00-07:00

Prezados leitores,   Estou iniciando uma nova série de tutoriais, com três ou quatro partes explicando como gerar mapas em seus sites ou sistemas web utilizando a API do Google Maps, que é extremamente funcional. Os posts são semanais.  Nessa primeira parte, veremos como exibir um mapa de determinada localidade, esse mapa não é navegável, ou seja, é apenas uma imagem estática. A exibição de mapas dinâmicos utilizando JavaScript será vista na próxima parte.  Vamos iniciar com um exemplo. A imagem abaixo já está com a url no formato do mapa estático. Ela exibe o Distrito Federal do Brasil:    Vejam como a url para exibir esse mapa é simples: http://maps.google.com/maps/api/staticmap?center=Brasilia,DF&amp;zoom=14&amp;size=256x256&amp;sensor=false  Ou seja, basta incluir essa url no atributo src da tag img, por exemplo: &lt;img src="http://maps.google.com/maps/api/staticmap?center=Brasilia,DF&amp;zoom=14&amp;size=256x256&amp;sensor=false" alt="Mapa do Distrito Federal, Brasil"&gt;Nessa url se baseia o uso de imagens estáticas, essa é a base: http://maps.google.com/maps/api/staticmap?$parametros$São diversos os parâmetros que podem ser informados. O parâmetro sensor é obrigatório, ele indica se o dispositivo cliente possui um identificador de localidade, como um dispositivo GPS em um celular. Inicialmente definiremos sempre como false (a não ser que você deseje construir uma aplicação que utiliza a localização GPS), mas falarei mais sobre esse parâmetro na parte 2 desse tutorial.O parâmetro center também é obrigatório, caso não haja nenhum marcador definido, como nessa url. E veja que legal, o Google geocodifica (geocodificar é o ato de transformar um endereço da forma como entendemos para números que informam as coordenadas do local) o endereço passado por parâmetro. Então como diria o meu professor: "É chuchu com tody".Obs: Ao invés do endereço pode ser informado a latitude e longitude, separados por vírgula. Como geralmente é mais útil informar um endereço, usarei nesse tutorial apenas endereços. Então se quiséssemos apontar o mapa para onde está localizado o estádio Maracanã no Rio de Janeiro, precisamos apenas alterar o parâmetro center da url: http://maps.google.com/maps/api/staticmap?center=Maracana,Rio+de+Janeiro,RJ,Brasil&amp;zoom=15&amp;size=256x256&amp;sensor=falseReparem que os espaços são substituídos pelo sinal +, isso é feito para codificar a URL, geralmente isso é feito automaticamente, e você poderia informar os espaços. Mas não custa nada inserir um + no lugar do espaço, isso pode evitar transtornos futuros.Também notem que alterei o parâmetro zoom, esse parâmetro indica o nível do zoom da imagem, quanto maior, mais detalhe.Por fim, nesse primeiro exemplo, o parâmetro size indica o tamanho da imagem retornada em pixels. Na documentação da API do Google Maps é informado o limite máximo de 640x640px. Esse parâmetro deve ser informado na seguinte ordem: horizontal x vertical. Ex: 500x400.Existe também o parâmetro format que indica o formato de retorno, pode ser PNG (padrão), JPG ou GIF.Um outro parâmetro interessante é o maptype. Esse parâmetro informa o tipo de mapa a ser retornado, o padrão é roadmap, que retorna um mapa desenhado com as estradas e indicações, como um Guia 4 rodas. Os outros três tipos são: satellite, hybrid e terrain.Veremos um exemplo:Alterando o atributo maptype para o tipo satellite, que retorna um mapa com a foto de satélite do mesmo local, o estádio Maracanã no Rio de Janeiro:Essa foi a url utilizada: http://maps.google.com/maps/api/staticmap?center=Maracana,Rio+de+Janeiro,RJ,Brasil&amp;zoom=15&amp;size=256x256&amp;sensor=false&amp;maptype=satelliteNote que apenas alterei o parâmetro maptype. O tipo hybrid é uma união dos tipos roadmap e satellite. Já o tipo terrain apenas mostra o terreno e vegetação.MarcadoresEssa parte é muito importante, ao informar marcadores, não é necessário informar o parâmetro center. É difícil explicar o que é um marcador, então vou mostrar no mapa abaixo:Esse balão com um "A" é um marcador.A url para desenhar esse marcador no mapa: http://maps.google.com/maps/api/staticmap?center=Maracana,Rio+de+Janeiro,RJ,Brasil&amp;zoom=15&amp;size=256x256&amp;sensor=false&amp;maptype=satellite&amp;markers=label:A|color:red|Maracana,Rio+de+Janeiro,RJ,BrasilPara inserir um marcador basta adicionar o parâmetro markers, para cada marcador deve ser adicionado um parâmetro. Dentro desse parâmetro temos atributos de estilo. Se informarmos apenas o endereço (ou latitude,longitude) é exibido um marcador na cor vermelha com um ponto no lugar do label. Para mudar isso inserimos os estilos, que são color, label e size.O atributo color pode ter qualquer valor válido de cor de 24 bits, como um número hexadecimal: 0xFFFFFF (Branco) ou uma das seguintes cores definidas: black, brown, green, purple, yellow, blue, gray, orange, red, white. Os valores de atributos são separados por um pipe (|).O atributo label é o nome do marcador, no exemplo acima o label é A.O atributo size possui três opções: tiny, mid, small. E como o nome indica, informa o tamanho de cada marcador.Os valores de marcador são informados como a notação CSS, atributo:valor, ou seja, utilizando dois pontos (:). O último elemento da url, depois de um | é o endereço ou coordenada, sem nenhum par, apenas o valor, como no exemplo acima.Agora um exemplo prático com mais de um marcador:Esse exemplo mostra o mapa com o parâmetro center no Brasil, como zoom 5 e dois marcadores, um no Rio de Janeiro (R) e outro em Brasília. Todos possuem estilos.Essa é a url da imagem acima: http://maps.google.com/maps/api/staticmap?center=Brasil&amp;zoom=3&amp;size=256x256&amp;sensor=false&amp;maptype=satellite&amp;markers=label:B|color:blue|Brasilia,DF,Brasil&amp;markers=label:R|color:0xFFFFCC|size:mid|Rio+de+Janeiro,RJ,BrasilHá outro recurso da API que é o de exibição de rotas ou caminhos (paths), mas explicarei sobre ele nos próximos tutoriais. Então até lá!Referência (Documentação da API do Google Maps): http://code.google.com/intl/pt-BR/apis/maps/documentation/staticmaps/Obs: Segundo a documentação, há um limite para solicitações de desenho de mapas, que é de 1000 por dia. Porém, ao solicitar um mesmo endereço não é contado como uma nova solicitação.