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&zoom=14&size=256x256&sensor=false
Ou seja, basta incluir essa url no atributo src da tag img, por exemplo:
<img src="http://maps.google.com/maps/api/staticmap?center=Brasilia,DF&zoom=14&size=256x256&sensor=false" alt="Mapa do Distrito Federal, Brasil">
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&zoom=15&size=256x256&sensor=false
Reparem 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&zoom=15&size=256x256&sensor=false&maptype=satellite
Note 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.
Marcadores
Essa 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&zoom=15&size=256x256&sensor=false&maptype=satellite&markers=label:A|color:red|Maracana,Rio+de+Janeiro,RJ,Brasil
Para 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&zoom=3&size=256x256&sensor=false&maptype=satellite&markers=label:B|color:blue|Brasilia,DF,Brasil&markers=label:R|color:0xFFFFCC|size:mid|Rio+de+Janeiro,RJ,Brasil
Há 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.
Nenhum comentário:
Postar um comentário