Balaio Tecnológico: Incluindo mapas em um Web site

1 de novembro de 2009

Incluindo mapas em um Web site

Parece que virou mania trabalhar com mapas para facilitar a visualização de locais, para dar instruções de como chegar a um determinado local ou apenas para visitar vitualmente pontos turísticos como diversão. São ferramentas para o computador como o Google Earth ou aparelhos que você pode carregar consigo, como GPSs ou celulares. Na internet, endereços como o Apontador permitem que você estabeleça rotas para ir de um ponto a outro.

A sofisticação dessas ferramentas tem aumentado cada vez mais, com exibição de imagens de satélite em melhor resolução e inclusão de outros serviços associados, como indicação de ônibus que passam pelo local ou próximo a ele, estações de metrô nas proximidades, lojas e caixas 24 horas localizadas nas redondezas, etc.

Agora, também está ficando mais fácil incluir este tipo de serviço no seu próprio site. Como parte do sistema de buscas Bing, a Microsoft lançou um conjunto de serviços e APIs que permitem formatar um mapa com as características desejadas e incluí-lo no seu site.

De acordo com o site da Microsoft, "o Bing Maps é um serviço online de mapas que permite aos usuários pesquisar, descobrir, explorar, planejar e compartilhar informações a respeito de locais específicos. Ao usar mapas tradicionais de rodovias, fotos aéreas com textos, fotos em ângulo baixo aéreas e de alta resolução e capacidade de pesquisa por aproximação, o Bing Maps fornece oportunidades únicas aos desenvolvedores de software para incorporar tanto localizações fixas quanto busca por locais específicos em suas aplicações Web".

A API é disponibilizada como um conjunto de classes JavaScript, apropriadas para inclusão numa página HTML. Para usá-la, então, precisamos incluir no cabeçalho do HTML uma referência a essas classes JavaScript:

A classe principal dessa API é a VEMap, provendo acesso aos mapas em si e introduzindo funções para dar-lhes a aparência desejada, traçar rotas, incluir marcações customizadas, etc.. O funcionamento básico dela está exemplificado na função abaixo, extraído do mapa que é exibido mais em baixo nesse post:

function GetMap()
{
map = new VEMap('myMap');
map.LoadMap(new VELatLong(-23.5656,-46.6524),16,'h' ,false);
}

A função LoadMap aceita como parâmetro um par Latitude/Longitude com as coordenadas do ponto que será exibido no mapa. Os demais parâmetros indicam, na sequência, a profundidade do zoom aplicado (de 1 para o mais afastado até 20 para maior aproximação), o tipo de imagem será apresentada (imagens de satélite, mapa tradicional ou um híbrido desses dois) e, por último, se o mapa permanecerá fixo na posição configurada (true) ou se permitirá interação com o usuário (false).

O nome 'myMap', informado como parâmetro ao construtor da VEMap, é o ID da tag HTML onde o mapa será desenhado. No exemplo abaixo, a função GetMap escrita no quadro anterior é chamada no evento OnLoad da página. Veja que há uma tag DIV cujo ID é 'myMap' - é dentro desta tag que o mapa será apresentado.

O resultado é o mapa abaixo. Ele está permitindo interação, isto é, você pode navegar para outros pontos e modificar a forma de exibição.
Se não conseguir visualizar o mapa acima, clique aqui. Se você usa o Firefox com o complemento NoScript, terá que liberar a execução de scripts para o endereço onde o Bing armazena os scripts do programa de Mapas antes de poder visualizar o mapa publicado aqui.

Além do código básico mostrado aqui, o mapa reproduzido acrescenta uma marcação indicando a localização exibida - no caso, o endereço da ABC71 em São Paulo. Outros recursos disponíveis mas não representados no exemplo são a capacidade de traçar uma rota entre dois pontos, encontrar pontos de referência e endereços, visão 3D e "Birds Eye" (um plano inclinado em relação ao chão ao invés de paralelo ao chão), etc.

Uma ferramenta que a Microsoft disponibilizou junto com o SDK facilita bastante a criação do código HTML envolvido na publicação de mapas. Trata-se do Bing Maps Interactive SDK que apresenta num menu a lista de recursos disponíveis na ferramenta e um painel lateral com o mapa gerado pela opção selecionada. Quando você terminar de montar o mapa com as características que você quer, basta mudar para a guia Source Code e copiar o código HTML gerado com o exemplo para incluí-lo em seu site.