Olá a todos.
Como prometi, hoje vou escrever sobre a Google Static Maps API (API estática do Google Maps).
Esta API do Google Maps permite incorporar uma imagem do Google Maps à sua página web, sem a necessidade de JavaScript ou qualquer outra página dinâmica.
Resumindo, apenas com base em parâmetros de URL através de uma solicitação HTTP para o Google e ele lhe retorna uma imagem para a sua página web, utilizando nada mais nada menos que uma tag <img>.
Confesso que este recurso é muito útil no meu dia a dia para algumas funções tais como:
- aplicações em celulares que não suportam javascript;
- páginas que não necessitam um mapa sofisticado, apenas uma imagem próxima ao local chave;
- confirmação visual de um endereço digitado em um formulário;
- entre muitas outras;
Limites de Uso
Segundo a página do Google Static Maps API, existe um limite de uso diário por leitores (!!e não por chaves API maps!!) de 1.000 solicitações de imagens diferentes. O que acredito ser muito difícil ocorrer, porém, essa limitação pode ser alterada pelo Google sem aviso prévio.
Parâmetros
Para utilizar a API estática do Google Maps basta acessar a seguinte URL:
http://maps.google.com/staticmap?parametros
Segue a lista de parâmetros disponíveis e em destaque sua obrigatoriedade:
- center (obrigatório caso não haja marcadores (markers: identificador de um local/endereço)) : este parâmetro define o ponto central do seu mapa, levando em consideração o zoom em que o mesmo se encontra. Para se obter o centro do mapa você deve passar os parâmetros latitude e longitude (os quais já vimos em outros artigos) separados por vírgula (ex.: -30.245422,-51.542684).
- zoom (obrigatório caso não haja marcadores) : determina o zoom de aproximação do mapa (varia de 1 a 18, no Brasil na maioria das capitais temos no máximo 17 níveis).
- size (obrigatório) : define o tamanho da imagem (largura e altura) no seguinte formato: LARGURA x ALTURA. (ex.: 300×250).
- maptype : (opcional) : representa o tipo de mapa a ser criado. Hoje existem sete tipos disponíveis: roadmap : (padrão) tipo de mapa padrão utilizado caso o parâmetro maptype não for definido, representa o mesmo padrão utilizado no Google Maps; mobile : apropriado para sistemas para celulares, onde o nível de detalhes é menor e os textos são maiores para uma melhor visualização das informações em resoluções menores. satellite: imagens de satélite; terrain: imagens de terreno; hybrid: junção dos dados vetoriais e imagem de satélite; mapmaker-roadmap: especifica imagens do Google Map Maker (não disponível no Brasil); mapmaker-hybrid: mostra uma camada transparente das principais ruas unida com imagens de satélite utilizando a base do Map Maker (o map Maker esta disponível em apenas alguns países).
Exemplos
maptype: padrão
maptype: mobile
maptype: satellite
maptype: hybrid
maptype: terrain
- markers : (opcional) : define um ou mais marcadores no mapa. A representação dos marcadores é feita também com os parâmetros de latitude e longitude, separados pelo caracter barra ( | ) caso existam mais de um. Se você utilizar um ou mais marcadores em seu mapa não é necessária a utilização dos parâmetros zoom e center, pois as mesmas serão automaticamente calculadas de acordo com seus marcadores.
- key : (obrigatório) : como já vimos em outros exemplos de APIs do Google, identifica a chave de API do Maps em relação ao domínio em que ocorre a solicitação de URL.
Formatos de Imagens
- gif (default)
jpg
- jpg-baseline
png8
png32
Markers
O parâmetro markers define um ou mais parâmetros para a representação no mapa.
Exemplo:
markers=marker1|marker2|marker3|... etc.
Utilize o caracter barra/pipe (|) para concatenar os markers, ou %7C no caso de URL ASCI.
Uma declaração de marcador de exemplo é do formato {latitude},{longitude},{color}{alpha-character}. Na seqüência de caracteres os valores da cor e do caractere alfa especialmente não são separados por uma vírgula.
Exemplo:
http://maps.google.com/staticmap?size=250x250&markers=-30.0277041,-51.2003346,bluea|-30.0217041,-51.2033346,greenv&key=MAPS_API_KEY
markers=-30.0277041,-51.2003346,bluea|-30.0217041,-51.2033346,greenv
O primeiro marker será azul, com o caracter A e o segundo marker verde com o caracter V.
Caminhos (Paths)
O parâmetro path especifica um ou mais caminhos sobrepostos no mapa.
Atualmente o tamanho máximo são 100 pontos.
Este parâmetro utiliza as seguintes atribuições:
path= pathColorType : pathColorValue ,weight: pathWeight | pathPoint1 | pathPoint2 | pathPoint3 |... etc
Parâmetros:
pathColorType:
- rgb: especifica um padrão RGB utilizando um esquema de cores de 24 bits hexadecimal. O padrão de opacidade para rgb é de 50%. (exemplo de pathColorValue: 0xffffff)
- rgba: especifica um padrão RGB de 32 bits hexadecimal. Usando rgba lhe permite variar a transparência dos caminhos que você criar.
weight: especifica a espessura de um determinado caminho.
Alguns exemplos:
linha fina azul, 50% de opacidade: path=rgb:0x0000ff,weight:1
linha vermelha sólida: path=rgba:0xff0000ff,weight:5
linha espessa preta sólida: path=rgba:0xffffffff,weight:10
Para traçar o caminho, vamos passar um ou mais pontos para representarmos as linhas.
Exemplo
http://maps.google.com/staticmap?size=250x250&key=MAPS_API_KEY&
path=rgba:0xff0000ff,weight:5|-30.0286526,-51.2053849|-30.0285127,-51.2006248|-30.0284554,-51.1992281
Não se esqueça dos meu artigos anteriores de como obter a latitude e longitude dos pontos: Utilize o link: http://maps.google.com/maps/geo?q=LOGRADOURO_NUM_CIDADE_UF&output=xml&key=SUA_CHAVE
Agora uma dica melhor ainda
Utilize o Google Static Map Wizard para a geração de seus mapas estáticos, é realmente simples.
Link: http://gmaps-samples.googlecode.com/svn/trunk/simplewizard/makestaticmap.html
Até a próxima.