USANDO API DO GOOGLE MAPS PARA CRIAR UM MAPA INTERATIVO

UNIVERSIDADE FEDERAL DE VIÇOSA

CENTRO DE CIÊNCIAS EXATAS

DEPARTAMENTO DE ENGENHARIA CIVIL

SETOR DE ENGENHARIA DE AGRIMENSURA

WANDERLEY PATRÍCIO DE SOUSA NETO

USANDO API DO GOOGLE MAPS PARA CRIAR UM MAPA INTERATIVO.

ESTUDO DE CASO: CAMPUS-VIÇOSA

JUNHO de 2009

VIÇOSA-MG

ii

UNIVERSIDADE FEDERAL DE VIÇOSA

CENTRO DE CIÊNCIAS EXATAS

DEPARTAMENTO DE ENGENHARIA CIVIL

SETOR DE ENGENHARIA DE AGRIMENSURA



Monografia apresentada como parte das

exigências da disciplina EAM 498 – Seminário e

Monografia II – do Curso de Graduação de

Engenharia de Agrimensura


JUNHO - 2009

iii



Por


Monografia apresentada como requisito para conclusão da disciplina EAM 498 –

Seminário e Monografia II no curso de Engenharia de Agrimensura da Universidade Federal

de Viçosa.

___________________________________________________

Professor Júlio César de Oliveira (Orientador)

___________________________________________________

Professor Afonso de Paula dos Santos (Co-Orientador)

iv

AGRADECIMENTOS

À Deus, que através de sua presença, iluminou o meu caminho.

À minha Mãe que, diante das dificuldades, nunca deixou de me incentivar nos momentos

difíceis e de desespero.

Ao meu Pai, que aqui não se encontra, mas sei que sempre estará ao meu lado olhando por

mim.

Ao meu irmão, que tudo fez pra que não me sentisse derrotado em algumas ocasiões.

À minha namorada, Mirian Silva, pelo apoio incondicional e pela compreensão.

Aos meus familiares e amigos, em especial, aos amigos Afonso de Paula, Pollyana Martins e

Glauber Florindo, pelo incentivo e apoio constantes.

Por fim, agradeço aos professores Afonso de Paula dos Santos e Júlio César de Oliveira, pela

paciência, pelos ensinamentos e pelas orientações passadas, que muito me ajudaram na

elaboração desta monografia.

v

SUMÁRIO

1. INTRODUÇÃO................................................................................................................ 1

2. MOTIVAÇÃO E JUSTIFICATIVAS..............................................................................3

3. OBJETIVOS.......................................................................................................................4

4. REVISÃO DE LITERATURA..........................................................................................5

4.1 Os Web Maps...................................................................................................................5 4.2 Google Maps....................................................................................................................6 4.3 A API do Google Maps....................................................................................................7 4.4 Google Earth....................................................................................................................7 4.5 Arquivos do tipo KML.....................................................................................................8

5. METODOLOGIA..............................................................................................................11

5.1 Delimitação da área de estudos ......................................................................................11 5.2 Etapas da Metodologia....................................................................................................11

5.2.1 - Gerando a Google Maps API Key............................................................................12

5.2.2 - Implementando o código para inserir o Mapa e controles de visualização..............13

5.2.3 – Elaboração do Layout da Página.............................................................................17

5.2.4 – Determinação da Latitude e da Longitude dos locais de interesse..........................18

5.2.5 - Geração dos arquivos KML.....................................................................................20

5.2.6 – Inserindo funções de localização e adição de marcadores ao mapa........................21

5.3 Funcionamento do Web Mapa-UFV interativo para o campus-Viçosa..........................22

6. RESULTADOS E DISCUSSÕES....................................................................................27

7. CONCLUSÃO...................................................................................................................30

8. REFERÊNCIAS BIBLIOGRÁFICAS............................................................................31

Apêndice A.........................................................................................................................33

vi

RESUMO

O dinamismo e interatividade fazem parte de várias aplicações presentes na internet.

Atualmente os usuários, além de usufruírem das informações, passaram também a

disponibilizar informações por meio de Blogs, sites, redes sociais ou outras aplicações.

Desta forma, uma tecnologia que tem sido bastante explorada são os Web Maps, que

possibilitam gerar mapas na internet com riqueza de informações espaciais, conteúdo

georreferenciado e interatividade com os usuários.

Com isso, o presente estudo utilizou-se dos recursos dos Web Maps para divulgar

informações temáticas dos elementos presentes no campus-Viçosa, através do

desenvolvimento de um site e da utilização da API do Google Maps, juntamente com o

formato de arquivo KML, buscando demonstrar a eficiência do uso em conjunto desses

recursos na disponibilização de conteúdo cartográfico interativo, possibilitando assim o

acesso de um maior número de pessoas às informações.

Além disso, uma vez que essas informações estão disponíveis no ambiente da Web,

proporcionam dinamismo entre o mapa e o usuário, tornando a pesquisa mais agradável e

objetiva. Permitindo que qualquer usuário com acesso à internet possa visualizar as principais

edificações do campus-Viçosa espacializadas no Web Mapa-UFV.

Nesse sentido, o Web Mapa-UFV feito utilizando a API do Google Maps e o formato de

arquivo KML demonstrou ser uma excelente ferramenta para divulgar informações espaciais

aos usuários. Além disso, é uma maneira viável e eficiente para compartilhar informações

geográficas e descritivas.

1

1. INTRODUÇÃO

Nas últimas décadas, o avanço tecnológico associado ao crescimento da internet, como

um importante instrumento de interligação e divulgação de informações, impulsionou a

modernização de técnicas e de processos ligados às áreas cartográficas. Com a recente

implantação de novas tecnologias de comunicação, como a banda larga e a internet móvel,

empresas mundialmente conhecidas, como a Google, Microsoft, e a Yahoo estão investindo

ainda mais em ferramentas para World Wide Web.

De início, a internet era utilizada quase que exclusivamente para transferências de

textos, onde as informações eram disponibilizadas por grandes empresas do setor de mídia

digital e não havia nenhuma interação por parte dos usuários. Porém, com o passar do tempo,

a internet está cada vez mais dinâmica e os usuários, além de usufruírem das informações,

passaram também a disponibilizar informações, colaborando com o conteúdo da internet por

meio de Blogs, sites, redes sociais, conteúdo compartilhado, etc.

Atualmente, a internet provê acesso a todos os tipos de mídias de informação, sejam

elas escritas, áudio, imagem ou por meio de vídeo, sendo que todas essas aplicações

ocorreram diretamente com a interação dos usuários. Esse caráter multimídia da internet,

associado a outros fatores como o aumento da velocidade de transmissão de dados, uma maior

rapidez de processamento dos computadores e a melhora dos algoritmos de compactação de

dados, contribuem para a disponibilização de grandes volumes de dados na rede mundial de

computadores.

Neste contexto, os setores ligados às geotecnologias ganharam espaço dentro da

plataforma da Web, sendo que, dentre as inúmeras ferramentas que são atualmente fornecidas

aos usuários da internet, aquelas voltadas para criação, manipulação, visualização e edição de

mapas, têm particularmente despertado bastante atenção.

Sendo assim, uma tecnologia que tem sido bastante explorada é a dos Web Maps. Uma

vez existindo a possibilidade de se gerar mapas para a Internet, aumenta-se a demanda por

recursos até então indisponíveis para as técnicas de mapeamento em mídia papel, tais como a

elaboração de mapas com recursos de animação, interação com o usuário, opções para

visualizar mapas em diferentes escalas, habilitar e desabilitar camadas de informações,

acrescentar conteúdos diversos, além de possibilitar a visualização por um maior número de

pessoas, dentre outras vantagens.

2

Assim, a integração de mapas em diferentes aplicações tem despertado muito interesse

por parte das empresas, pois as informações geradas para a plataforma da Web são, via de

regra, feitas de forma amigável ao usuário. As aplicações mesclam interfaces intuitivas e

comandos de fácil entendimento, permitindo desta forma a diferentes usuários, com diferentes

necessidades e interesses, acessar informações de um mapa ou até mesmo gerar informações

para este mapa.

Como visto, os mapas são recursos que estão cada vez mais integrados em diferentes

aplicações na Web, tornando-se uma nova forma de obter informações. Até o momento,

estamos familiarizados com a informação via texto, sendo que, com a disponibilização de

mapas via internet, a leitura e obtenção de dados começa a ficar mais dinâmica. Neste novo

ambiente podemos, por exemplo, realizar buscas por lugares, visualizar usos e coberturas do

solo e até mesmo acrescentar fotos, textos ou vídeos à base de dados. Desta forma, o uso de

Web Maps tornou-se uma nova maneira de disponibilizar informação ao alcance de qualquer

usuário na internet.

3

2. MOTIVAÇÃO E JUSTIFICATIVAS

Em se tratando do ambiente Web, todas as transformações que ocorrem e que

despertam interesse do público geram mudanças no comportamento das empresas, instituições

de ensino, órgãos públicos, entre outros. Atualmente, há uma vasta quantidade de sites

utilizando os recursos de Web Maps para divulgar diversos tipos informações. Essa forma de

disponibilizar informações considerando localização, visualização e interatividade tem

tornado esse tipo de aplicação potencialmente explorável.

Segundo Oliveira (2008), a forma de criar, armazenar e compartilhar informações

geográficas mudou consideravelmente na última década. O acesso e a distribuição de mapas

em formato vetorial e imagens em formato raster estão cada vez mais presentes no ambiente

da Web, através de portais de dados geográficos.

Oliveira (2008) ainda informa que as empresas mais importantes no setor de

geoinformação continuam as mesmas, e cita alguns exemplos como: Esri, Autodesk, Bentley,

DigitalGlobe, Spot, Space Imaging, PCI, MapInfo, Leica, Erdas, Oracle, etc. Oliveira (2008)

ainda faz uma menção dizendo que o ano de 2005 foi um marco histórico para a

geoinformação, pois nesse ano a Google comprou a empresa Keyhole e passou a ter controle

sobre uma poderosa tecnologia de apresentação de informação geográfica na internet, a qual

logo em seguida deu origem ao Google Earth.

Prosseguindo, Oliveira (2008) relata que as companhias como Nokia, Tele Atlas,

Navteq, TomTom, MapQuest, Yahoo, Microsoft e Google, entre muitas outras, têm apostado

em uma nova forma de organizar as informações na internet, e ainda acrescenta que gigantes

da internet, como a Google, Microsoft e Yahoo, têm consciência que as representações

gráficas do mundo real podem ser uma forma concreta de adquirir riquezas com a internet.

Desta forma, os mapas passam a ser uma interface com o usuário para diversas tarefas do

cotidiano, entre elas comprar.

Assim, a maior motivação para elaboração deste trabalho foi a disponibilização do

acesso às informações geográficas na internet e a forma pela qual um número cada vez maior

de pessoas utiliza esse ambiente para aplicações referentes a geoinformação. Neste sentido, a

pesquisa desenvolvida procura aplicar a tecnologia acima apresentada para a disponibilização

de informações espaciais referentes ao campus-Viçosa da Universidade Federal de Viçosa

(UFV), como forma de popularizar o acesso simplificado, via web, a tais informações.

4

3. OBJETIVOS

Existe um vasto campo de pesquisa a respeito dos mapas interativos, sendo uma das

inúmeras abordagens a forma pela qual essas informações serão disponibilizadas nesses

mapas.

Desse modo, a presente pesquisa visa demonstrar como é possível utilizar a API do

Google Maps, em conjunto com a linguagem de marcação Keyhole Markup Language

(KML), para criar o Web Mapa-UFV interativo para o campus-Viçosa da Universidade

Federal de Viçosa (UFV), com informações úteis a respeito da instituição, tais como a

localização e a descrição das principais edificações do campus-Viçosa da UFV. Permitindo

que qualquer usuário com acesso à internet possa visualizar as principais edificações do

campus espacializadas no Web Mapa-UFV. Espera-se que o produto gerado na presente

pesquisa sirva de orientação para toda a comunidade universitária ou a qualquer usuário da

internet que tenha interesse em conhecer o campus.

5

4. REVISÃO DE LITERATURA

De acordo com Vasconcelos et al. (2007), as formas mais comuns de disponibilização

de dados geográficos na internet se processam de duas maneiras: estática ou dinâmica. A

disponibilização de dados geográficos de forma estática geralmente se dá através de arquivos

pré-existentes, em formatos característicos (jpg, bmp, gif, png, tiff), os quais são

simplesmente visualizados ou baixados pelo usuário. Já a disponibilização de dados na forma

dinâmica é realizada através de soluções em Web Maps ou soluções WebGIS (que levam em

consideração análise e processamento dos dados), que compreendem aplicações com Sistema

de Informação Geográfica (SIG) para a internet.

4.2 Os Web Maps

Nas palavras de Marisco et al. (2004), os Web Maps podem disponibilizar aos usuários

comuns possibilidade de acesso às informações geográficas de modo interativo e dinâmico.

Recursos como símbolos gráficos em um produto cartográfico interativo podem se tornar

objetos ativos, clicáveis e recuperáveis de um servidor de banco de dados. As legendas podem

ser apresentadas em novas janelas, as cores podem ser alteradas à gosto do usuário, objetos

que se movimentam podem ser disponibilizados e variados níveis de informação em escalas

distintas podem ser vistos por meio de funções Zoom (in-out).

Neste sentido, os Web Maps passaram a ser a interface entre os usuários e os dados

geoespaciais armazenados em servidores de banco de dados, possibilitando uma interação

homem-máquina. Esta interação poderá ainda ser ampla ou restritiva, dependendo do tipo de

informação a ser disponibilizada ao usuário e das suas funcionalidades interativas.

Contudo, de acordo Marisco et al. (2004), os tipos de Web Maps mais encontrados na

Internet ainda são os mapas estáticos não interativos, tendo como única finalidade sua

visualização. Esses mapas são elaborados a partir de produtos cartográficos analógicos e

convertidos para o formato digital por meio de scanners. Assim, por não terem sido

construídos para serem apresentados na Web, não exploram totalmente suas funcionalidades.

Logo, o mais adequado é explorar novas tecnologias para a Internet que permitam projetar

Web Maps estáticos ou dinâmicos com interfaces e conteúdos interativos.

Acompanhando esta tendência, a Google é um exemplo de empresa que está fornecendo

tecnologias que permitem projetar mapas interativos para o ambiente Web. A empresa

6

disponibiliza um serviço no qual o usuário pode utilizar várias ferramentas para criação de

mapas interativos em ambiente Web por meio da API1 do Google Maps.

4.2 Google Maps

O Google Maps é um serviço gratuito fornecido pela empresa Google, usado para

realizar pesquisas, visualização de mapas e imagens de satélite da Terra. O Google Maps

possibilita a produção de um mapa personalizado completo, sendo possível marcar locais,

adicionar vídeos, fotos e compartilhar todo este conteúdo na rede mundial de computadores.

Quando o Google Maps foi lançado, em fevereiro de 2005, ainda em sua versão beta,

tornou-se rapidamente uma referência em serviços de mapas na Internet. Com uma interface

rica e intuitiva, a aplicação permitia acesso a uma enorme base de dados contendo inúmeras

imagens de satélite, mapas de cidades, bairros, ruas e avenidas dos Estados Unidos. Com o

tempo, novas localidades foram sendo adicionadas no sistema até que em meados de maio de

2007, a Google finalmente disponibilizou consultas de endereços no Brasil, sendo que, em

outubro de 2007, uma versão estendida para o público brasileiro foi oferecida, com a

possibilidade de se localizar restaurantes, hotéis, traçar rotas, dentre outras utilidades

(AZEVEDO, 2008).

4.3 A API do Google Maps

A API do Google Maps é uma interface de desenvolvimento para aplicações baseadas

no próprio Google Maps, permitindo criar aplicativos inovadores de mapeamento para a

plataforma da Web. Essa API ajuda a integrar mapas e geocodificação aos sites, possibilitando

que as aplicações com conteúdo georreferenciado sejam facilmente apresentadas em qualquer

navegador.

De acordo com Faria (2006), um passo importante na disponibilização em escala global

de informações geográficas gratuitas foi dado pela Google quando lançou o site Google Maps.

Para o autor, o que leva a afirmar que se trata de um marco histórico para a disponibilização

de informações geográficas gratuitas não é o site em si, mas sim o fato de, paralelamente, a

Google ter criado uma forma dos utilizadores das informações geográficas poderem incluir os

1 Sigla para ("Application Programming Interface") que em português significa Interface de

Programação de Aplicativos.

7

mapas disponibilizados pela Google em seus próprios sites, sem a necessidade de nenhum

componente extra no servidor Web: as APIs.

A primeira versão da API do Google Maps foi disponibilizada em junho de 2005. A API

consiste basicamente de um pequeno conjunto de classes JavaScript que fornecem uma

interface necessária para que o usuário possa construir aplicações para exibir os mapas,

realizar consultas por endereços, realizar funções de zoom, acrescentar pontos de referência

ou descrições no mapa, dentre outras possibilidades.

Para utilizar a API, é preciso solicitar ao Google uma chave única informando o

endereço do site onde se deseja integrar os recursos do Google Maps alguns dos recursos

disponíveis são zoom; pan; visualizar imagens de satélites de diversos locais do planeta;

incluir marcadores de locais; realizar overlay de arquivos KML; pesquisar por locais; traçar

rotas; buscar endereços; inserir linhas; polígonos; etc. Maiores detalhes a respeito dos

recursos possíveis para uma implementação estão na Documentação2 da API do Google Maps.

É importante frisar que todo este procedimento se dá dentro da "filosofia" AJAX, o que

significa dizer que o usuário não tem que se preocupar com os detalhes (AZEVEDO, 2008).

De acordo com Limeira (2006), o AJAX surgiu em fevereiro de 2005, como sendo um

conceito de navegação e atualização de páginas Web. Antes do surgimento do AJAX, exigia-se

que para cada solicitação em uma página Web, a página inteira fosse atualizada no navegador,

ou seja, independentemente da atualização ser apenas de uma pequena parte da página, toda a

página era recebida pelo servidor, redesenhada e retornada para o navegador, o que gerava

mais tráfego de informações do que era necessário e consequentemente, tornando o processo

mais lento. Sendo assim, com a utilização do AJAX pode-se trafegar apenas os dados que

realmente foram atualizados em uma página Web, ganhando-se em qualidade e rapidez de

processamento.

4.4 Google Earth

O Google Earth é um aplicativo que oferece ao usuário um globo virtual composto por

imagens de satélite e aéreas de todo o planeta, permitindo cálculo de distâncias entre

diversos lugares, criação de rotas, visualização de edifícios, monumentos e construções em

3D, além de muitos outros recursos.

2 http://code.google.com/intl/pt-BR/apis/maps/documentation/reference.html

8

Inicialmente, o aplicativo foi criado com o nome de Earth Viewer pela companhia

Keyhole, Inc, considerada uma das pioneiras no desenvolvimento de programas de

visualização geoespacial. Em 2004, a empresa Keyhole, Inc foi adquirida pela Google,

empresa que em 2005 disponibilizou o aplicativo com o nome Google Earth. O programa tem

sido bastante aprimorado desde o seu lançamento, sendo que na versão atual (versão 5.0) é

possível visualizar oceanos, observar imagens das galáxias e estrelas e utilizar outros recursos

como o street view que disponibiliza ao usuário vista panorâmica de 360º na horizontal e 290º

na vertical de imagens em alta resolução de algumas regiões do mundo, dentre diversas outras

possibilidades.

Além das imagens, o Google Earth permite a sobreposição de camadas que podem

conter dados como mapas de ruas, localização de prédios e serviços. Essas informações

podem ser disponibilizadas na internet através da Google Earth Community ou em forma de

arquivos KML ou KMZ3, permitindo assim uma escrita sobre regiões de interesse criando

uma forma de mapeamento comunitário (PILLAR, 2006).

Recentemente, a Google lançou um plugin4 que permite ao usuário visualizar e ter

acesso à todas as funcionalidades do Google Earth no navegador, sem que seja necessário ter

o programa instalado no computador. Outra novidade é o lançamento do Google Earth API

que, de forma análoga ao Google Maps API, permite que sejam incorporadas todas as

funcionalidades da Google Earth em qualquer página da Web, sendo possível adicionar

marcadores e linhas, adicionar modelos 3D, carregar arquivos KML, dentre outros recursos.

4.5 Arquivo do tipo KML

De acordo com Bowden (2008), Keyhole Markup Language (KML) é um formato de

arquivo usado para exibir dados geográficos em navegadores, como o Google Earth, Google

Maps e o Google Maps para celular. Os arquivos nesse formato podem ser usados para

apontar locais, adicionar imagens e mostrar camadas de dados de várias maneiras. O KML

utiliza uma estrutura baseada em tags com elementos e atributos aninhados, sendo baseado

em XML5.

3 O KMZ é o arquivo compactado do formato KML

4 Plugin - Programa que adiciona funções a outros softwares ou serviços online. 5 Sigla para EXtensible Markup Language (Linguagem extensível de formatação)

9

O XML é definido como o formato universal para dados estruturados na Web. Essa

linguagem permite escrever documentos de forma que sejam adequadamente interpretados

pelo computador. Além disso, o XML é uma especificação técnica desenvolvida pela W3C6

para superar as limitações do HTML (ALECRIM, 2006).

A princípio os arquivos em formato KML eram usados para gerenciar dados

tridimensionais geoespaciais nos programas Google Earth, Google Maps e Google Mobile.

Porém, em abril de 2008 a linguagem foi aceita como padrão pelos membros do Open

Geospatial Consortiu (OGC) como formato para exibir e representar elementos geográficos

em 2D e 3D na Web. Percebe-se com isso que a utilização do KML como formato para

exibição de dados geográficos na Web está se tornado cada vez mais presente, ou seja, a partir

de agora, os desenvolvedores terão uma abordagem padronizada para armazenar e

compartilhar conteúdo geográfico, seja em mapas baseados na internet ou globos virtuais

(MUNDOGEO, 2008).

Por se tratar de uma linguagem de padrão aberto, o KML deve se tornar nos próximos

anos o principal formato de representação de dados geográficos e de dados para mapas

digitais para Web. Dessa forma, organizações devem adotá-la como padrão num futuro não

muito distante.

Instituições como Microsoft, ESRI, Autodesk e Bentley já implementaram suporte ao

formato em várias de suas aplicações, onde o próprio Microsoft Virtual Earth já oferece

suporte ao KML. Existem também inumeras ferramentas para gerar KML a partir de bases já

existentes, e outras que se encaixam dentro do universo de conversores do tipo DXFtoKML,

SHPtoKML, XLStoKML, 3DMAXtoKML, etc.

No Brasil, o Instituto Brasileiro de Geografia e Estatística (IBGE) é um exemplo de

órgão que tem convertido parte da sua base de dados para disponibilizar informações de

maneira espacializada nos formatos de arquivos KML e KMZ. O instituto gera o arquivo

KMZ associando informações sobre o atributo com a sua localização geográfica, de forma

que seja possível espacializar essa informação no Google Earth, permitindo que as

informações a respeito do atributo sejam consultadas por meio de um click do mouse sobre o

marcador.

6 Sigla para World Wide Web Consortium - Entidade responsável pela definição da área gráfica da

internet

10

No site do IBGE (2009), é possível fazer o download de arquivos KMZ com diversos

tipos de informações. Um exemplo de aplicação para esses arquivos foi empregado pelo

IBGE ao gerar um arquivo KMZ espacializando as cidades do Brasil e acrescentando

informações referentes a cada cidade nos balões exibidos no Google Earth. Outro exemplo é a

localização das estações da Rede Brasileira de Monitoramento Contínuo (RBMC). Nessa

aplicação, após visualizada a espacialização das estações no Google Earth, basta clicar sobre

o ícone que representa a estação para abrir um balão com um link para download dos dados da

estação. Outro caso é o arquivo contendo a localização das Referências de Nível do Sistema

Geodésico Brasileiro, onde após um click sobre os pontos espacializados no Google Earth, é

exibido um balão onde é possível ter acesso aos relatórios das Referências de Nível. Existem

ainda vários outros exemplos de arquivos KMZ que podem ser baixados do site do IBGE.

11

5 Metodologia

5.1 Delimitação da área de estudos

A área de estudo para a construção do Web Mapa-UFV corresponde aos limites

territoriais do campus-Viçosa da Universidade Federal de Viçosa (UFV), no município de

Viçosa, região da Zona da Mata no Estado de Minas Gerais (FIGURA 1). As dimensões

físicas do campus-Viçosa da UFV em 2007 estão apresentadas na Tabela 1.

Tabela 1. Dimensões físicas da UFV em 2007.

Área física total 47.787.696,00 m²

Área total construída 372.047,60 m²

Área construída no Campus 318.385,38 m²

Área de laboratórios (558 unidades) 23.152,10 m²

Fonte: Pró-Reitor de Planejamento e Orçamento (PROPLAN, 2009).

Figura 1. Localização do Campus -Viçosa.

5.2. Etapas da Metodologia

Este trabalho tem por finalidade disponibilizar informações a respeito do campus-

Viçosa da Universidade Federal de Viçosa em uma aplicação de Web Maps, sendo que os

dados necessários para a criação do Web Mapa-UFV foram obtidos através da internet ou

por levantamento no próprio campus-Viçosa. As etapas para a elaboração do trabalho estão

descritas abaixo.

12

5.2.1 - Gerando a Google Maps API Key

Para o presente estudo, toda a base de dados estará disponível no endereço

http://www.ufv.br/dec/eam/mapaufv/.

Para utilizar qualquer API do Google Maps, e ter acesso externo aos mapas e fotos, foi

necessário obter uma chave fornecida pela Google. Essa chave é única, gratuita e foi obtida no

seguinte endereço: http://code.google.com/intl/pt-BR/apis/maps/signup.html. Para gerar a

chave, foi fornecido o endereço do site onde será hospedada a aplicação como apresentado na

Figura 2.

Figura 2. Gerando Google Maps API Key.

Após fornecer ao Google o endereço do site e aceitar os termos e condições, selecionou-

se a opção Gerar chave de API conforme mostrado na Figura 2, onde o navegador é

direcionado para efetuar o logon na conta da Google. Essa conta é um cadastro que é feito pra

se ter acesso a qualquer um dos serviços oferecidos pela Google, tais como: Orkut, Gmail,

Google Sites, dentre outros.

Sendo assim, para usufruir do serviço Google Maps API foi necessário ter uma inscrição

para uma conta da Google como apresentado na Figura 3.

Figura 3. Site para acessar a conta da Google e visualizar a chave API.

13

Após efetuar o logon, foi possível visualizar a chave API Key gerada para o endereço

fornecido (http://www.ufv.br/dec/eam/mapaufv/). A Figura 4 mostra a chave que a Google

gerou para o endereço informado.

Figura 4. Código fornecido pela Google.

Essa chave API Key permiti a utilização de todos os recursos que a Google disponibiliza

para as aplicações que utilizam da API do Google Maps.

5.2.2 – Implementando o código para inserir o Mapa e controles de visualização.

Para a programação do Web Mapa-UFV, utilizou-se as linguagens HTML7, JavaScript e

a API do Google Maps. O HTML é uma linguagem utilizada para criar documentos na

internet, de forma que esses documentos possam ser lidos em praticamente qualquer tipo de

computador e transmitidos via internet. O JavaScript é uma linguagem de programação feita

para complementar as capacidades do HTML, e a API do Google Maps, é uma interface de

desenvolvimento para aplicações baseadas no própria Google Maps.

Para essa etapa utilizou-se do software DreamWeaver de forma a auxiliar na

implementação do código do arquivo tipo HTML, ou seja, arquivo no qual foram inseridos os

códigos do Google Maps API. Depois de criado o arquivo tipo HTML, introduziu-se parte da

programação utilizando a API do Google Maps, gerando com isso a imagem do campus-

Viçosa e os controles de visualização com os comandos de zoom e para deslocamento. A

página contendo a imagem do campus e os controles de visualização serão tratados daqui para

7 Acrônimo para a expressão inglesa HyperText Markup Language, que significa Linguagem de

Marcação de Hipertexto.

14

frente como página base, onde o código HTML programado para a página está descrito a

seguir.

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

2. <html xmlns="http://www.w3.org/1999/xhtml" >

3. <meta http-equiv="content-type" content="text/html; charset=utf-8"/>

4. <script src=http://maps.google.com/maps?file=api&v=2.x&key=

ABQIAAAA3pDLKcv77x4P_rE3jq0WchS5nLZ01qa2Y2eIqseezsPnKvMUxhTfJRb8

4_28HPqrhhDe8olccINjnw ”

5. type="text/javascript"></script>

6. <script src="http://gmaps-utility-

library.googlecode.com/svn/trunk/markermanager/release/src/markermanager.js">

</script>

7. <script type="text/javascript">

8. var map;

9. function initialize()

10. {

11. if (GBrowserIsCompatible())

12. {

13. map = new GMap2(document.getElementById("mapa"))

14. map.setMapType(G_SATELLITE_MAP)

15. map.setCenter(new GLatLng(-20.7596,-42.8687), 16)

16. map.addControl(new GLargeMapControl())

17. map.addControl(new GMapTypeControl())

18. }

19. }

21. </script>

22. <body onload="initialize()">

23. <div id="mapa" style="left: 280px; width: 671px; position: absolute; top: 102px;

height: 457px;"> </div>

24. </body>

25. </html>

Comentários a respeito da funcionalidade de algumas linhas estão descritos de forma

sucinta abaixo.

15

Linha 4 - Aponta para o endereço do arquivo JavaScript que inclui todos os símbolos e as

definições necessárias ao uso da API do Google Maps. Nessa linha foi inserida a

chave obtida no sub-tópico 5.2.1.

Linha 8 - Contém uma variável criada para receber a classe GMap2.

Linha 9 – Essa linha refere-se ao início da função Initialize. Essa função testa se o navegador

é compatível com a aplicação e exibe a imagem do campus. Além disso, adiciona

os controles de zoom, deslocamento e os botões para alternar entre visualizar

imagem de satélite, mapa e híbrido.

Linha 13 - A classe JavaScript que representa um mapa é GMap2. Os objetos dessa classe

definem um único mapa em uma página. Criou-se uma nova instância dessa classe

usando o operador JavaScript “new”.

Ao criar uma nova instância do mapa, especificou-se um nó DOM8 na página

(elemento div) como sendo um contêiner para o mapa. Os nós HTML são filhos do

objeto JavaScript document, e obteve-se uma referência a esse elemento usando o

método document.getElementById().

Linha 14 - Faz a página ser iniciada com uma imagem de satélite.

Linha 15 - Essa linha é a responsável por inicializar o mapa criado pela linha 13. O método

setCenter() exige como parâmetros uma coordenada GLatLng e um nível de zoom.

É necessário enviá-lo antes que qualquer outra operação seja realizada no mapa,

inclusive a definição de outros atributos do próprio mapa.

Linha 16 - Adiciona o controle de zoom e deslocamento, tamanho grande. A posição padrão é

no canto superior esquerdo do mapa.

Linha 17 - Adiciona os botões para alternar o tipo de mapa (Satélite, Mapa, Híbrido).

Linha 21 - Enquanto a página HTML está sendo carregada, o DOM é criado e todas as

imagens e scripts externos são recebidos e incorporados ao objeto document criado

na linha 13. Isso é feito para que o mapa somente seja apresentado na página depois

de ter sido totalmente carregado.

8 DOM significa (document object model ou modelo de objeto do documento)

16

Executa-se a função que constrói o objeto GMap2 somente quando um elemento

<body> da página HTML receber um evento onload: isso evita um comportamento

imprevisível.

Linha 22 - Para que o mapa seja exibido em uma página da internet, é preciso reservar um

ponto para o mesmo. Isso foi feito criando-se um elemento chamado div e obtendo-

se uma referência a ele no DOM do navegador. No exemplo acima, definiu-se um

div chamado mapa e configurou-se seu tamanho por meio dos atributos de estilo

left, width, position, top e height.

As demais linhas são referentes à estrutura da página e foram geradas no software

DreamWeaver e não serão comentadas nesse estudo. Maiores informações a respeito das

classes, eventos, métodos e elementos são encontradas na Documentação da API do Google

Maps (GOOGLE 2009a).

O resultado da página base elaborada pode ser visto na Figura 5.

Figura 5. Resultado da implementação do código da página base.

As demais aplicações, tais como funções para inserção de marcadores, funções de

procura por locais de interesse no mapa e os menus de salto serão abordadas mais adiante

nesse estudo.

17

5.2.3 - Elaboração do Layout da Página.

Dando sequência ao trabalho, elaborou-se o layout da página, por meio do software

DreamWeaver. Optou-se por fazer uma interface simples, mostrando apenas os seguintes

elementos:

1. Área destinada para apresentação da imagem do campus-Viçosa e dos controles de

visualização. Esta área está representada pela letra “C” da Figura 6.

2. Um cabeçalho localizado no topo da página indicado pela letra “A” na Figura 6. Esse

cabeçalho contém dois link’s, sendo que um deles redireciona o usuário para a home

page9 da UFV, e o outro link redireciona para a página de telefones e e-mails da UFV.

O cabeçalho possui também um menu que permite selecionar uma categoria de

edificações pré-determinadas. O Apêndice A descreve quais edificações estão

presentes em cada categoria.

3. A letra “B” da Figura 6 representa a região da página principal destinada para a

criação de um menu de salto.

Figura 6. Layout da página.

9 Home Page é a página inicial de um site da internet.

18

5.2.4 – Determinação da Latitude e da Longitude dos locais de interesse

Foi necessário determinar as coordenadas dos locais de interesse por dois motivos: o

primeiro foi gerar os arquivos KML que são adicionados ao mapa em forma de marcadores; o

segundo motivo é o de centralizar o mapa em uma coordenada latitude e longitude

determinada.

Sendo assim, para determinar as coordenadas dos locais de interesse utilizou-se de uma

pequena aplicação. Essa aplicação foi baseada na API do Google Maps, cuja função foi de

retornar as coordenadas dos pontos clicados sobre o mapa. As coordenadas (latitude e

longitude) obtidas nessa etapa estão referenciadas ao Datum WGS84.

Para obter as coordenadas das edificações de interesse utilizou-se do método

GEvent.addListener(). Esse método usa o objeto map, o evento click e a função

function(overlay,latlng), sendo que essa função é chamada quando ocorre o evento

especificado.

Esta funcionalidade consiste no Geocode reverso, ou seja, através de um clique em

determinado ponto do mapa obtêm-se as coordenadas do local clicado. Para implementar a

função que fornece as coordenadas dos pontos clicados, foi inserido entre as linhas 18 e 19 do

código mostrado no sub-tópico 5.2.2 o fragmento de código apresentado abaixo.

1. GEvent.addListener(map,"click", function(overlay,latlng) {

2. if (overlay) {

3. return;

4. }

5. var tileCoordinate = new GPoint();

6. var tilePoint = new GPoint();

7. var currentProjection = G_NORMAL_MAP.getProjection();

8. tilePoint = currentProjection.fromLatLngToPixel;

9. var myHtml = "Latitude: " + latlng.lat() +

10. "<br/> Longitude: " + latlng.lng();

11. map.openInfoWindow(latlng, myHtml);});

A Figura 7 é o resultado de um clique efetuado no centro do edifício da Biblioteca

Central, depois de implementado o fragmento de código acima. Esse fragmento foi utilizado

19

somente para obter as coordenadas dos pontos de interesse, sendo descartado após a obtenção

de todas as coordenadas contidas no Apêndice A.

Figura 7. Resultado do código que retorna as coordenadas dos pontos clicados.

As coordenadas obtidas por meio do método GEvent.addListener() são referentes a

quatro casos: 1) algumas coordenadas são relativas aos centros das edificações; 2) outras

referem-se à região central de um conjunto de edificações que representam um setor; 3)

algumas coordenadas referem-se à edificações que não constam na imagem, mas que estão

presentes no campus (uma vez que as duas imagens que representam o campus-Viçosa da

UFV estão desatualizadas, sendo uma do dia 14 de julho de 2002 e a outra do dia 3 de

novembro de 2007 - Fonte: Google Earth); e, por último, as coordenadas referentes aos locais

de construções previstas.

Para auxiliar na identificação dos prédios no Web Mapa-UFV e associar um conteúdo

descrevendo o nome a cada local, foi consultado o mapa impresso (FIGURA 8) elaborado

pela Coordenadoria de Comunicação Social e atualizado em setembro/2008. Por meio deste

mapa identificaram-se quais locais seriam clicados no Web Mapa-UFV para que o método

GEvent.addListener(), descrito no fragmento de código anterior, pudesse retornar as

coordenadas desses locais. Com isso, montou-se uma tabela (Apêndice A) associando as

coordenadas das edificações com os seus respectivos nomes.

20

Figura 8. Mapa impresso vista parcial do campus da UFV.

5.2.5 – Geração dos arquivos KML

Nessa etapa foram gerados todos os arquivos KML’s referentes aos locais de interesse

do campus, sendo os arquivos gerados por meio do software Google Earth.

Para exemplificar melhor esta etapa, foram descritos os procedimentos realizados para a

geração do KML para a Biblioteca Central do campus da UFV, uma vez que esses

procedimentos são análogos para todos os locais de interesse.

Primeiramente, foi adicionado um marcador no local de interesse, por meio da opção

“Adicionar Marcador” presente no menu superior da Google Earth (número 1, FIGURA 9).

Essa opção exibe uma caixa de diálogo onde foram editados os campos, nome e coordenadas

(Latitude/Longitude) (número 2, FIGURA 9), referentes à Biblioteca Central. As coordenadas

inseridas foram provenientes da tabela descrita no Apêndice A.

Na mesma caixa de diálogo, foram adicionadas as descrições do marcador (número 3,

FIGURA 9), no qual o conteúdo descrito será exibido no balão de informação. Este conteúdo

é composto pelo nome da edificação Biblioteca Central e dois links, sendo que um deles para

o site da Biblioteca Central, e o outro, para o endereço na Web onde a foto da biblioteca está

hospedada (endereço: <img src=http://www.ufv.br/dec/eam/mapaufv/fotos/wp_ufv7.jpg

alt="picture" width="300" height="225" align="middle" /></td>). Os outros elementos

inseridos foram para criar uma tabela cuja função é reservar um espaço para a imagem, essa

tabela não é necessária, mas utilizando-se desse artifício evita-se que eventualmente a imagem

apareça fora do balão de informação.

Para finalizar a edição do arquivo clica-se no botão OK (FIGURA 9).

21

Figura 9. Criando o arquivo KML para Biblioteca Central.

O passo seguinte foi salvar a informação no formato KML por meio da opção salvar

lugar como. Desta forma, gerou-se o arquivo KML para a Biblioteca Central do campus-

Viçosa.

5.2.6 – Inserindo funções de localização e adição de marcadores ao mapa.

Para esta aplicação, foram implementadas duas funções para adicionar marcadores ao

mapa, sendo que uma dessas funções adiciona um conjunto de marcadores ao mapa de uma

única vez, e a outra faz com que o mapa seja redirecionado, de forma que a edificação ou o

local de interesse seja apresentado centralizado no mapa com o marcador associado.

O fragmento de código abaixo mostra a função responsável por inserir um conjunto de

marcadores ao mapa.

1. function insere_marcadores(){

2. for ( var i = 0 ; i < aux ; i++ )

3. map.addOverlay( geoXml[ i + 1] )

4. }

22

Essa função trabalha da seguinte maneira: quando a função “insere_marcadores” é

solicitada por alguma parte do código, um loop é iniciado. O responsável por esse loop é o

comando “for”, cuja sintaxe é:

for( inicialização ; condição ; incremento ){ comando; }

A inicialização do comando for acontece com a variável de controle de loop “i”

recebendo o valor zero. A condição é uma expressão de relação que testa a variável “i” contra

o valor da variável “aux” (o valor da variável “aux” foi atribuído no início da página e refere-

se a quantidade de edificações que serão adicionadas). O incremento “i++” define a maneira

como a variável de controle de loop será alterada cada vez que o loop se repetir.

Nesse código o comando a ser executado pelo for é o método “map.addOverlay”. Esse

método serve para adicionar os marcadores ao mapa e tem como parâmetro a variável

“geoXml[ i + 1]”, que guarda o endereço do arquivo KML que será adicionado em forma de

marcador.

Outra maneira de adicionar marcadores ao mapa é através da função localização

representada no código abaixo. Essa função, quando solicitada por alguma parte do código,

centraliza o mapa nas coordenadas indicadas pela linha 2 e, em seguida, o comando indicado

pela linha 3 remove todos os marcadores que estejam visíveis no mapa. O comando

representado pela linha 4 adiciona o marcador associado ao local de interesse.

1 function localizacao i () {

2 map.panTo(new GLatLng(Latitude,Longitude))

3 map.clearOverlays()

4 map.addOverlay(geoXml[ i ]);

5 }

5.3. Funcionamento do Web Mapa-UFV interativo para o campus da UFV

Com intuito de melhorar a organização do Web Mapa-UFV da área de estudo, dividiu-

se os locais do campus-Viçosa a serem representados em categorias. Isso se mostrou

necessário por duas causas: primeiro porque carregar uma quantidade elevada de marcadores

pode fazer a aplicação demorar demasiadamente para ser visualizada por completo no

navegador do usuário; e segundo, se não fosse dividida por categorias a apresentação das

23

edificações, o usuário teria que procurar pelo local de interesse em uma extensa lista de

nomes.

Logo, para tentar reduzir o tempo de “carregamento” da página e facilitar a

identificação dos locais de interesse, as edificações presentes no campus-Viçosa da UFV

foram divididas em 13 categorias como mostra a Figura 10.

Figura 10. Categorias pré-definidas para o Web Mapa-UFV.

Para cada uma dessas categorias foi programado um arquivo do tipo HTML, de forma

que, cada um dos 13 arquivos HTML manipulasse os marcadores pertencentes à respectiva

categoria. O Apêndice A relaciona quais marcadores pertencem a cada categoria.

Para melhor descrever os passos desenvolvidos neste item do trabalho, será utilizada

como exemplo a categoria “Agências Bancárias” , sendo que para as demais categorias o

procedimento é análogo.

O código abaixo se refere ao conteúdo do arquivo HTML que representa a categoria

“Agências Bancárias” . Algumas linhas já foram comentadas no sub-tópico 5.5.2 desse

estudo, e não serão comentadas novamente, a menos que seja necessário para explicar alguma

parte do código.

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd">

2 <html xmlns="http://www.w3.org/1999/xhtml" >

3 <meta http-equiv="content-type" content="text/html; charset=utf-8"/>

4 <script

src="http://maps.google.com/maps?file=api&v=2.x&key=ABQIAAAA3pDLKcv77x4P_rE3jq0WchS5nLZ01qa2

Y2eIqseezsPnKvMUxhTfJRb84_28HPqrhhDe8olccINjnw"

5 type="text/javascript"></script>

24

6 <script src="http://gmaps-utility-library.googlecode.com/svn/trunk/markermanager/release/src/markermanager.js"> </script>

7 <script type="text/javascript">

8 var map

9 var aux = 4

10 var geoXml = [ ]

11 function initialize()

12 {

13 if (GBrowserIsCompatible())

14 {

15 map = new GMap2(document.getElementById("mapa"))

16 map.setMapType(G_SATELLITE_MAP)

17 map.removeMapType(G_HYBRID_MAP);

18 map.setCenter(new GLatLng(-20.7596,-42.8687), 16)

19 map.addControl(new GLargeMapControl())

20 map.addControl(new GMapTypeControl())

21 geoXml[1] = new GGeoXml("http://sites.google.com/site/ufvmaps/kmls/BancodoBrasil.kml");

22 geoXml[2] = new GGeoXml("http://sites.google.com/site/ufvmaps/kmls/BancoItau.kml");

23 geoXml[3] = new GGeoXml("http://sites.google.com/site/ufvmaps/kmls/CaixaEconomicaFederal.kml");

24 geoXml[4] = new GGeoXml("http://sites.google.com/site/ufvmaps/kmls/UFVCREDI.kml");

25 javascript : insere_marcadores()

26 }

27 }

28 function insere_marcadores(){

29 for (var i = 0; i < aux; i++)

30 map.addOverlay(geoXml[i+1])

31 }

32 function localizacao1() {

33 map.panTo(new GLatLng(-20.76378855,-42.86764920))


35 map.addOverlay(geoXml[1]);

36 }





41 }





46 }



25



51 }

52 </script>

53 <body link= "black" vlink= "black" alink= "black" onload="initialize()">

54 <p> </p>

55 <STYLE> A {text-decoration: none; } </STYLE>

56 <div id="mapa" style="left: 318px; width: 668px; position: absolute; top: 87px; height: 463px;"> </div>

57 <div id="menu" style="position:absolute; width:270px; height:463px; z-index:2; left: 48px; top: 87px; overflow: auto;

visibility: inherit;">

58 <p>

59 <a href="javascript:insere_marcadores()"><font size="-1">ADICIONAR TODOS OS MARCADOSRES</font></a><br />

60 <a href="javascript:localizacao1()">Banco do Brasil</a><br />

61 <a href="javascript:localizacao2()">Banco Itaú</a><br />

62 <a href="javascript:localizacao3()">Caixa Econômica Federal</a><br />

63 <a href="javascript:localizacao4()">UFV-CREDI</a><br />

64 </p>

65 <p> </p>

66 </div>

67 </body>

68 </html>

As linhas 8, 9 e 10 do código acima representam as variáveis. A variável aux recebe a

quantidade de números de edificações que são representadas por meio de marcadores no Web

Maps, sendo que, a categoria “Agências Bancárias” , possui quatro edifícios (Banco do Brasil,

Banco Itaú, Caixa Econômica Federal e UFV-CREDI). A variável chamada geoXML (do tipo

vetor) é usada para guardar o conteúdo do objeto (GGeoXML), onde este objeto é uma API

utilizada para especificar uma URL (endereço na internet) para os arquivos KML’s.

A linha 25 é responsável por chamar a função insere_marcadores, ou seja, quando a

página está sendo carregada, esta linha chama todos os marcadores da categoria “Agências

Bancárias” que serão adicionados ao mapa.

As linhas 28, 29, 30 e 31 são referentes à função insere_marcadores, função explicada

com detalhes no sub-tópico 5.2.6 deste trabalho. Para a categoria “Agências Bancárias”, essa

função adiciona ao mapa quatro marcadores, cada um localizado na latitude e longitude que

estão indicadas no arquivo KML referente a cada edificação.

As linhas 32, 33, 34, 35 e 36 são referentes à função localização, função também

explicada no sub-tópico 5.2.6. A linha 32, por exemplo, refere-se ao início da função que

localiza a agência do Banco do Brasil, e insere o KML da respectiva edificação. Essa função é

26

chamada pela linha 60, sempre que o usuário clicar na opção “Banco do Brasil” no menu de

salto indicado na Figura 11.

Figura 11. Menu de salto.

A linha 33 é responsável por centralizar o mapa nas coordenas latitude e longitude

dadas como parâmetro para o método GLatLng. A linha 34 remove todos os marcadores que

estiverem no mapa. Já a linha 35 é responsável por inserir o marcador associado à edificação

“Banco do Brasil” nas coordenadas que estão representadas no arquivo KML feito para essa

edificação.

As linhas 37 a 51 são referentes à funções de localização e possuem as mesmas

funcionalidades explicadas acima, sendo que, as linhas 37 a 41 correspondem à função para

localizar a edificação do Banco Itaú e inserir o marcador que o representa; as linhas 42 a 46

correspondem à função para localizar a Caixa Econômica Federal e inserir o marcador que a

representa; e as linhas 47 a 51 correspondem à função para localizar a agência UFV-CREDI e

inserir o marcador que a representa.

A linha 59 chama a função insere_marcadores sempre que o usuário clicar na opção

“ADICIONAR TODOS OS MARCADORES”. Essa opção está situada no topo da lista do

menu de salto.

As linhas 60, 61 e 62 estão associadas ao menu de salto, chamando a função

correspondente sempre que o usuário clicar em uma das opções do menu de salto.

As demais linhas se referem à estrutura da página e foram geradas pelo software

DreamWeaver.

27

6. RESULTADOS E DISCUSSÕES

O resultado desse estudo se expressa na utilização das funções implementadas para o

Web Mapa–UFV feito para o campus-Viçosa da Universidade Federal de Viçosa. Sendo

assim, seguem abaixo alguns comentários e uma sequência de figuras que apresentam os

resultados alcançados.

A Figura 12 representa a categoria laboratórios do Web Mapa-UFV, onde o usuário

tem então a opção de escolher uma das 13 categorias definidas para descrever as edificações

presentes no campus-Viçosa. Após a seleção um novo menu de salto é chamado e os

marcadores da nova categoria são sobrepostos na imagem sinalizando as edificações que

representam.

Figura 12. Após carregar o mapa seleciona-se uma das categorias para que o Web Mapa-UFV carregue os marcadores associados à categoria de interesse.

A Figura 13 representa a situação na qual se escolheu a categoria dos alojamentos, e o

marcador associado a um alojamento tenha sido clicado. Essa interação entre o usuário e o

aplicativo é muito útil, pois podem ser inseridas no balão diversas informações como fotos,

textos, vídeos e link’s. Para essa aplicação em específico, o balão tem apenas um texto

referente ao nome da edificação e um link para a home page (caso exista) do local que o

marcador esteja sinalizando.

28

Figura 13. Detalhe de um marcador da categoria dos alojamentos e resultado do clique sobre um dos marcadores.

A Figura 14 mostra o Web Mapa-UFV com a categoria UFV Diversos ativada. Para o

caso em questão, o fato da imagem do campus-Viçosa ter uma boa resolução espacial foi

providencial para o uso dos controles de zoom disponibilizados pela API do Google Maps,

permitindo a exploração com riqueza de detalhes do campus-Viçosa.

Além disso, a interação do usuário com o marcador associado à utilização dos controles

de zoom possibilita que este se situe e saiba a localização da edificação no campus-Viçosa,

permitindo ainda que se veja a foto do local de interesse.

Figura 14. Resultado de um clique no marcador que identifica a Biblioteca Central do Campus-Viçosa da UFV, mostrando os detalhes do local, após sucessivos cliques no controle de zoom.

Uma outra opção implementada no Web Mapa-UFV foram os botões que permitem que

o Web Mapa-UFV seja apresentado em três diferentes tipos de visualização, dessa forma, o

usuário pode escolher entre as opções mapa, imagem de satélite ou híbrido, conforme mostra

a Figura 15.

29

Figura 15. Página com visualização mapa ativada, após clicar no controle que permite que se escolha qual tipo de visualização o usuário deseja ativar.

Outra funcionalidade incluída no Web Mapa-UFV foram os dois link’s do cabeçalho,

sendo que um deles redireciona o usuário para a home page da UFV, e o outro link

redireciona para a página de telefones e e-mails da UFV. Esses link’s foram inseridos para

acrescentar ao usuário a possibilidade de obter mais informações a respeito do campus-

Viçosa.

Figura 16. Detalhe do cabeçalho do Web Mapa-UFV e as páginas para as quais a aplicação redireciona o usuário.

Para as categorias que possuem maiores quantidades de KML’s, ou seja, com maiores

quantidades de dados a serem carregados notou-se uma instabilidade da aplicação, essa

instabilidade resume-se em deixar, às vezes, de adicionar os marcadores que representam

algumas edificações. Porém, essa instabilidade é minimizada quanto maior for a velocidade

de transmissão de dados via Web.

30

7. CONCLUSÃO

Os mapas para internet constituem uma importante ferramenta de comunicação à

disposição de um grande número de usuários. Dessa forma, os mapas interativos tornaram-se

uma ferramenta de divulgação de informações espaciais, temáticas e com conteúdo

georreferenciado, despertando a atenção das pessoas, mesmo que não sejam da área

cartográfica. De outro lado, uma vez que essas informações estão disponíveis no ambiente da

Web, proporcionam dinamismo entre o mapa e o usuário, tornando a pesquisa mais agradável

e objetiva.

Nesse sentido, o Web Mapa-UFV gerado para o campus-Viçosa da Universidade

Federal de Viçosa por meio da API do Google Maps e arquivos KML, demonstrou ser uma

excelente ferramenta para divulgar informações espaciais aos usuários. Além disso, é uma

maneira viável e eficiente para compartilhar conteúdo geográfico.

Contudo, apesar de ser uma alternativa viável, a utilização da base de dados da Google

apresenta algumas limitações, pois as imagens de satélite não são atualizadas constantemente,

omitindo dessa forma algumas edificações já existentes no campus-Viçosa. Outro ponto

negativo da aplicação gerada no presente estudo, refere-se à falha eventual em adicionar

marcadores, ou ainda, aos casos em que ocorreu sobreposição dos marcadores, devido a

algumas edificações serem compostas por vários departamentos ou setores,

consequentemente, com as mesmas coordenadas para identificação. O ideal seria criar uma

função que expandisse momentaneamente estes marcadores, de forma que fosse possível

selecionar e exibir o conteúdo de cada um separadamente.

Para trabalhos futuros, sugere-se o estudo de formas de associação entre localização

geográfica e banco de dados, permitindo-se assim implementar funções mais sofisticadas

como por exemplo um campo de buscas das edificações presentes na base de dados. Além

disso, poderiam ser utilizados outros recursos da API do Google Maps, tais como sobrepor a

imagem da base de dados da Google por uma imagem mais recente do campus, e utilizar as

ferramentas da API tendo como base essa nova imagem.

Salienta-se no entanto a permanente utilidade da pesquisa desenvolvida, tendo em vista

o potencial para a disponibilização via web das informações geográficas e descritivas do

campus-Viçosa da Universidade Federal de Viçosa.

31

8. REFERÊNCIAS BIBLIOGRÁFICAS

ALECRIM, E. Linguagem em XML. 2006 In.: infowester. Retirado de: http://www.infowester.com/lingxml.php. Acessado em: 22/04/2009.

AZEVEDO, C.. Imasters: Por Uma Internet Mais Criativa e Dinâmica 2008. Retirado de: http://imasters.uol.com.br/artigo/7832/programacao/google_maps_api/imprimir/Op. Cit.:Disponível: http://imasters.uol.com.br/artigo/7832/programacao/google_maps_api/

BOWDEN, B. Google Developer Day 2008 Brasil. Retirado de: http://code.google.com/intl/pt-BR/events/developerday/2008/sessions.html

FARIA, N. A. de S.. Suporte à edição cooperativa de Informação Geográfica em Ambiente WEB. 2006. 99 f.. Dissertação (Mestrado em Informática)- Departamento de Informática, Escola de Engenharia, Universidade do Minho Braga, Portugal, 2006.

Google API do Google Maps. Retirado de: http://code.google.com/intl/pt-BR/apis/maps/documentation/reference.html Acessado em: 17/ 04/2009. 2009a

Google Diretório do site - Google Code. Retirado de: http://code.google.com/intl/pt-BR/more/#products-products-kml Acessado em: 11/04/2009. 2009b

Google Earth Solidário. Retirado de: http://www.geometrik.info/ Acessado em 20/10/2008

Google Noções básicas do Maps - API do Google Maps - Google Code. Retirado de: http://code.google.com/intl/pt-BR/apis/maps/documentation/introduction.html Acessado em: 06/05/2009. 2009c

IBGE – Instituto Brasileiro de Geografia e Estatística. Servidor de Arquivos. Retirado de: http://www.ibge.gov.br/servidor_arquivos_geo/default.php?caminho=./pub/programa/Google_Earth Acessado em 17/05/2009.

LIMEIRA, J. L. S.. Utilização de AJAX no desenvolvimento de sistemas Web. Porto Alegre: 2006.

MARISCO, N.; PHILIPS, J. Web Mapas Interativos como Interfaces aos Dados Geoespaciais: Uma Abordagem Utilizando-se Tecnologias Fontes Abertas. In: COBRAC 2004. Congresso Brasileiro de Cadastro Técnico Multifinalitário. Florianópolis, SC, 10 a 14 de Outubro 2004.

MARISCO, N.; PHILIPS, J.; PEREIRA, H. R. Protótipo de Mapa para Web Interativo: Uma Abordagem Utilizando Código Aberto. In: Revista Brasileira de Cartografia, Rio de Janeiro Nº: 56/01, p.: 75 – 87, julho 2004.

32

MundoGEO. OGC aprova o formato de arquivo KML como padrão aberto - Notícias de geoinformação. 2008 In.: MundoGEO.com.br, Retirado de: http://www.mundogeo.com.br/noticias-diarias.php?id_noticia=10940 .

OLIVEIRA, E. F..Os Novos Rumos da Internet. In InfoGEO, Ano 10 ED.: 53, julho de 2008.

PILLAR, G. G.. Cidades Híbridas: Um estudo sobre a Google Earth como ferramenta de escrita virtual sobre a cidade. 83 f.. Monografia (Graduação em comunicação social) - Universidade Federal do Rio Grande do Sul, Porto Alegre, 2006.

PROPLAN - UFV em Números. Disponível em: http://www.ufv.br/proplan/ufvnumeros Retirado de: 04/05/2009.

VASCONCELOS, T. L. F. de; LEITE, E. P. F.; B. BARROS F., M. B. de. Disponibilização De Dados Da Fazenda Imbiribeira Na Internet. In: II Anais de Pesquisa e Inovação da Rede Norte Nordeste de Educação Tecnológica João Pessoa, PB, 2007

33

APÊNDICE A

34

Tabela 2. Informações sobre as edificações, categorias, fotos, coordenadas e arquivos KML's.

KML Nomes e Categorias Fotos (JPG) Coordenadas em graus decimais

Latitude Longitude

Agências Bancárias

ban1 Banco do Brasil wp_ban1 -20.76378855 -42.86764920

ban2 Banco Itaú wp_ban2 -20.76020207 -42.86937118

ban3 Caixa Econômica Federal wp_ban3 -20.76298599 -42.86695182

ban4 UFV-CREDI wp_ban4 -20.76264991 -42.86968231

Alojamentos

alo1 Alojamento Feminino wp_alo1 -20.75918379 -42.86918879

alo2 Alojamento Novíssimo/Novo wp_alo2 -20.76309634 -42.86783695

alo3 Alojamento Pós wp_alo3 -20.75907344 -42.87342668

alo4 Alojamento Posinho wp_alo4 -20.76033750 -42.87226796

alo5 Alojamento Velho wp_alo5 -20.76289068 -42.86824465

Centro de Ciências Agrárias

cca1 Departamento de Economia Rural wp_cca1 -20.76134574 -42.86639929

cca2 Departamento de Engenharia Agrícola wp_cca2 -20.77092615 -42.87216067

cca3 Departamento de Engenharia Florestal wp_cca3 -20.75983589 -42.86835730

cca4 Departamento de Fitopatologia wp_cca4 -20.75858185 -42.87110388

cca5 Departamento de Fitotecnia wp_cca5 -20.75858185 -42.87110388

cca6 Departamento de Solos wp_cca6 -20.75858185 -42.87110388

cca7 Departamento de Zootecnia wp_cca7 -20.76689342 -42.85994053

Centro de Ciências Biológicas e da Saúde

ccb1 Departamento de Biologia Animal wp_ccb1 -20.75916373 -42.87028313

ccb2 Departamento de Biologia Geral wp_ccb2 -20.75916373 -42.87028313

ccb3 Departamento de Biologia Vegetal wp_ccb3 -20.75792473 -42.87192464

ccb4 Departamento de Bioquímica e Biologia Molecular wp_ccb4 -20.75792473 -42.87192464

ccb5 Departamento de Educação Física wp_ccb5 -20.76728967 -42.86210775

ccb6 Departamento de Microbiologia wp_ccb6 -20.75916373 -42.87028313

ccb7 Departamento de Nutrição e Saúde wp_ccb7 -20.75792473 -42.87192464

35

Tabela 2. Informações sobre as edificações, categorias, fotos, coordenadas e arquivos KML's. (Continuação)

ccb8 Departamento de Veterinária wp_ccb8 -20.76824770 -42.85445809

Centro de Ciências Exatas

cce1 Curso de Engenharia de Agrimensura wp_cce1 -20.76460615 -42.86813200

cce2 Curso de Engenharia Ambiental wp_cce2 -20.76460615 -42.86813200

cce3 Departamento de Arquitetura e Urbanismo wp_cce3 -20.76442056 -42.87048697

cce4 Departamento de Engenharia Civil wp_cce4 -20.76460615 -42.86813200

cce5 Departamento de Engenharia de Produção wp_cce5 -20.76090934 -42.86512792

cce6 Departamento de Engenharia Elétrica wp_cce6 -20.76090934 -42.86512792

cce7 Departamento de Engenharia Química wp_cce7 -20.76452152 -42.86767873

cce8 Departamento de Física wp_cce8 -20.76460615 -42.86813200

cce9 Departamento de Informática wp_cce9 -20.76460615 -42.86813200

cce10 Departamento de Matemática wp_cce10 -20.76460615 -42.86813200

cce11 Departamento de Química wp_cce11 -20.76305119 -42.86924779

cce12 Departamento de Tecnologia de Alimentos wp_cce12 -20.76027731 -42.86592185

Centro de Ciências Humanas, Letras e Artes

cch1 Curso de Comunicação Social wp_cch1 -20.76167178 -42.86425352

cch2 Curso de Dança wp_cch2 -20.76167178 -42.86425352

cch3 Curso de Educação Infantil wp_cch3 -20.75968039 -42.86967695

cch4 Curso de Geografia wp_cch4 -20.76167178 -42.86425352

cch5 Curso de História wp_cch5 -20.76167178 -42.86425352

cch6 Curso de Pedagogia wp_cch6 -20.76167178 -42.86425352

cch7 Departamento de Administração wp_cch7 -20.75952990 -42.86815345

cch8 Departamento de Artes e Humanidades wp_cch8 -20.76167178 -42.86425352

cch9 Departamento de Direito wp_cch9 -20.76093442 -42.86408722

cch10 Departamento de Economia wp_cch10 -20.75952990 -42.86815345

cch11 Departamento de Economia Doméstica wp_cch11 -20.75968039 -42.86967695

cch12 Departamento de Educação wp_cch12 -20.75968039 -42.86967695

cch13 Departamento de Letras wp_cch13 -20.75952990 -42.86815345

36


Departamentos

dep1 Dep. de Arquitetura e Urbanismo wp_dep1 -20.76442056 -42.87048697

dep2 Dep. de Eng. Elétrica e de Produção wp_dep2 -20.76090934 -42.86512792

dep3 Dep. de Tecnologia de Alimentos wp_dep3 -20.76027731 -42.86592185

dep4 Departamento de Administração wp_dep4 -20.75952990 -42.86815345

dep5 Departamento de Artes e Humanidades wp_dep5 -20.76167178 -42.86425352

dep6 Departamento de Biologia Animal wp_dep6 -20.75916373 -42.87028313

dep7 Departamento de Biologia Geral wp_dep7 -20.75916373 -42.87028313

dep8 Departamento de Biologia Vegetal wp_dep8 -20.75792473 -42.87192464

dep9 Departamento de Bioquimica e Biologia Molecular wp_dep9 -20.75792473 -42.87192464

dep10 Departamento de Direito wp_dep10 -20.76093442 -42.86408722

dep11 Departamento de Economia wp_dep11 -20.75952990 -42.86815345

dep12 Departamento de Economia Doméstica wp_dep12 -20.75968039 -42.86967695

dep13 Departamento de Economia Rural wp_dep13 -20.76134574 -42.86639929

dep14 Departamento de Educação wp_dep14 -20.75968039 -42.86967695

dep15 Departamento de Educação Física wp_dep15 -20.76728967 -42.86210775

dep16 Departamento de Engenharia Agrícola wp_dep16 -20.77092615 -42.87216067

dep17 Departamento de Engenharia Civil wp_dep17 -20.76460615 -42.86813200

dep18 Departamento de Engenharia Florestal wp_dep18 -20.75983589 -42.86835730

dep19 Departamento de Física wp_dep19 -20.76460615 -42.86813200

dep20 Departamento de Fitopatologia wp_dep20 -20.75858185 -42.87110388

dep21 Departamento de Fitotecnia wp_dep21 -20.75858185 -42.87110388

dep22 Departamento de Informática wp_dep22 -20.76460615 -42.86813200

dep23 Departamento de Letras wp_dep23 -20.75952990 -42.86815345

dep24 Departamento de Matemática wp_dep24 -20.76460615 -42.86813200

dep25 Departamento de Microbiologia wp_dep25 -20.75916373 -42.87028313

dep26 Departamento de Nutrição e Saúde wp_dep26 -20.75792473 -42.87192464

dep27 Departamento de Química wp_dep27 -20.76305119 -42.86924779

37


dep28 Departamento de Solos wp_dep28 -20.75858185 -42.87110388

dep29 Departamento de Veterinária wp_dep29 -20.76824770 -42.85445809

dep30 Departamento de Zootecnia wp_dep30 -20.76689342 -42.85994053

Laboratórios

lab1 Lab. de Desenvolvimento Humano (LDH) wp_lab1 -20.76061339 -42.86649585

lab2 Lab. de Desenvolvimento Infantil (LDI) wp_lab2 -20.76060837 -42.86540687

lab3 Lab. de Eng. Sanitária e Ambiental (LESA) wp_lab3 -20.76841323 -42.85859406

lab4 Lab. de Engenharia Elétrica wp_lab4 -20.76378855 -42.86764920

lab5 Lab. de Hidráulica wp_lab5 -20.77219011 -42.87414551

lab6 Lab. de Informática wp_lab6 -20.76298599 -42.86695182

lab7 Lab. de Mecanização Agrícola (DEA) wp_lab7 -20.77201958 -42.87190318

lab8 Lab. de Sementes (DFT) wp_lab8 -20.76786650 -42.87023485

lab9 Lab. de Tecnologia de Alimentos wp_lab9 -20.76112001 -42.86485434

lab10 Lab. de Tecnologia de Celulose e Papel wp_lab10 -20.77185406 -42.87622154

Pavilhões de Aulas

pav1 Pavilhão de Aulas I (PVA) wp_pav1 -20.76041274 -42.86738634

pav2 Pavilhão de Aulas II (PVB) wp_pav2 -20.76380360 -42.86629736

pav3 Pavilhão de Aulas III (PVC) wp_pav3 -20.75771405 -42.87213385

pav4 Pavilhão de Ginástica wp_pav4 -20.76655234 -42.86446273

Pró-Reitorias

dir1 Diretoria de Logística e Segurança wp_dir1 -20.75924900 -42.87160814

dir2 Diretoria de Materiais wp_dir2 -20.76261982 -42.86656559

dir3 Diretoria de Obras e Manutenção wp_dir3 -20.77144778 -42.87275076

dir4 Diretoria de Registro Escolar wp_dir4 -20.76211821 -42.86930144

dir5 Diretoria dos Centros de Ciências wp_dir5 -20.76211821 -42.86930144

dir6 Diretoria Financeira wp_dir6 -20.76091937 -42.87033677

Restaurantes e Lanchonetes

res1 Lanchonete da Livraria UFV wp_res1 -20.76122535 -42.86761701

res2 Lanchonete do CEE wp_res2 -20.76195268 -42.86668897

38


res3 Restaurante do CEE wp_res3 -20.76195268 -42.86668897

res4 Restaurante Universitário - Espaço Multiuso wp_res4 -20.76218844 -42.87014902

res5 Restaurante Universitário (RU) wp_res5 -20.76066856 -42.86824465

res6 Restaurante Universitário 2 wp_res6 -20.76648211 -42.86124945

UFV Diversos

ufv1 Abatedouro (DTA) wp_ufv1 -20.77984892 -42.86313772

ufv2 Acessoria Internacional e de Parcerias wp_ufv2 -20.76211821 -42.86930144

ufv3 AGROS wp_ufv3 -20.75774916 -42.87111461

ufv4 Apicultura/DBA wp_ufv4 -20.75890790 -42.86820173

ufv5 Área de Serviços (PAD) wp_ufv5 -20.77176879 -42.87152231

ufv6 Aviário wp_ufv6 -20.77125718 -42.86105633

ufv7 Biblioteca Central wp_ufv7 -20.76122535 -42.86761701

ufv8 Biblioteca do Coluni wp_ufv8 -20.76256464 -42.86472023

ufv9 BIOAGRO wp_ufv9 -20.75882764 -42.86887228

ufv10 Biotério Central wp_ufv10 -20.76824770 -42.85445809

ufv11 Capela wp_ufv11 -20.76333209 -42.86816955

ufv12 Caprinocultura wp_ufv12 -20.77337382 -42.85272539

ufv13 Casa de Vegetação (DBV) wp_ufv13 -20.75739301 -42.87264884

ufv14 CCB - ll wp_ufv14 -20.75792473 -42.87192464

ufv15 CEE wp_ufv15 -20.76179718 -42.86679089

ufv16 CENTEV wp_ufv16 -20.76202792 -42.86710203

ufv17 CENTREINAR wp_ufv17 -20.77242585 -42.87353396

ufv18 Centro de Ensino a Distância (CEAD) wp_ufv18 -20.76027731 -42.86592185

ufv19 Centro de Vivência wp_ufv19 -20.76163667 -42.86991298

ufv20 COLUNI wp_ufv20 -20.76221853 -42.86483824

ufv21 COPEVE wp_ufv21 -20.76290071 -42.86553562

ufv22 Corpo de Bombeiros / Apoio da Vigilância wp_ufv22 -20.76338225 -42.86525667

ufv23 Correios (ECT) wp_ufv23 -20.76331704 -42.86966085

ufv24 CPD wp_ufv24 -20.76305119 -42.86924779

39


ufv25 Cunicultura wp_ufv25 -20.77125718 -42.86105633

ufv26 DCE Piscina wp_ufv26 -20.76211821 -42.86813200

ufv27 Dendrologia (DEF) wp_ufv27 -20.77363463 -42.87475169

ufv28 Divisão de Gráfica Universitária wp_ufv28 -20.76238908 -42.86613643

ufv29 Divisão de Jornalismo (DJO/CCS) wp_ufv29 -20.76211821 -42.86930144

ufv30 Divisão de Saúde wp_ufv30 -20.76210316 -42.86151767

ufv31 Edifício Arthur da Silva Bernardes wp_ufv31 -20.76211821 -42.86930144

ufv32 Edifício CCH wp_ufv32 -20.76179718 -42.86679089

ufv33 Edifício da Fitotecnia wp_ufv33 -20.77023898 -42.87155449

ufv34 Edifício da Saúde wp_ufv34 -20.76222355 -42.86003709

ufv35 Edifício das Licenciaturas wp_ufv35 -20.76352772 -42.86813736

ufv36 Edifício das Políticas Públicas wp_ufv36 -20.76167680 -42.86365271

ufv37 Edifício do Laboratório das Engenharias wp_ufv37 -20.76447574 -42.86727905

ufv38 Editora UFV wp_ufv38 -20.76238908 -42.86613643

ufv39 Entomologia(DBA) wp_ufv39 -20.75872732 -42.86848605

ufv40 Escola Estadual "Effie Rolfs" wp_ufv40 -20.76132567 -42.86260664

ufv41 Espaço Aberto de Eventos wp_ufv41 -20.75973557 -42.87493944

ufv42 Estábulo Modelo wp_ufv42 -20.77995926 -42.86146402

ufv43 Estação de Abastecimento de Água (ETA) wp_ufv43 -20.76528832 -42.86690354

ufv44 Estufas wp_ufv44 -20.75813541 -42.87005246

ufv45 Fáfrica de Ração (DFT/DZO) wp_ufv45 -20.77012362 -42.87258983

ufv46 Fruticultura wp_ufv46 -20.75761373 -42.86831975

ufv47 FUNARBE wp_ufv47 -20.77242585 -42.87353396

ufv48 Garagem Central wp_ufv48 -20.77271175 -42.87042797

ufv49 Ginásio de Esportes wp_ufv49 -20.76471149 -42.86526203

ufv50 Grife UFV wp_ufv50 -20.76464126 -42.86814809

ufv51 Horto Botânico wp_ufv51 -20.75712214 -42.87326038

ufv52 Hospital Veterinário (DTV) wp_ufv52 -20.76824770 -42.85445809

ufv53 Hotel do CCE wp_ufv53 -20.76195268 -42.86668897

40


ufv54 Incubadora de Empresas wp_ufv54 -20.77311300 -42.87323356

ufv55 Insetário/DBA wp_ufv55 -20.75852166 -42.86870062

ufv56 Laticínios/FUNARBE wp_ufv56 -20.76173699 -42.86585748

ufv57 Livraria UFV wp_ufv57 -20.76122535 -42.86761701

ufv58 Ouvidoria wp_ufv58 -20.76172696 -42.86803007

ufv59 Parque da Ciência/NEICIM wp_ufv59 -20.76365312 -42.86737561

ufv60 PDPL-Programa de Desenvolvimento da Pecuária Leiteira wp_ufv60 -20.76211821 -42.86930144

ufv61 Praça das Bandeiras wp_ufv61 -20.75610384 -42.87115216

ufv62 Praça de Vivência wp_ufv62 -20.76020207 -42.86937118

ufv63 Prédio do Curso de Dança wp_ufv63 -20.76060837 -42.86372244

ufv64 Prédio Principal(Ed. Arthur da Silva Bernardes) wp_ufv64 -20.76211821 -42.86930144

ufv65 Pró-Reitorias wp_ufv65 -20.76211821 -42.86930144

ufv66 Quatro Pilastras wp_ufv66 -20.75742898 -42.87502740

ufv67 Ranário/Piscicultura wp_ufv67 -20.77393056 -42.85977960

ufv68 Recanto das Cigarras wp_ufv68 -20.75793476 -42.86303043

ufv69 Reitoria wp_ufv69 -20.76106484 -42.87022412

ufv70 Secretaria de Órgãos Colegiados wp_ufv70 -20.76211821 -42.86930144

ufv71 Serviço de Comunicação (SECOM) wp_ufv71 -20.76141095 -42.87051916

ufv72 Setor de Informações aos Visitantes wp_ufv72 -20.75924900 -42.87160814

ufv73 Silvicultura wp_ufv73 -20.76975245 -42.87538469

ufv74 Sociedade de Investigação Florestais (SIF) wp_ufv74 -20.75983589 -42.86835730

ufv75 Suinocultura wp_ufv75 -20.77125718 -42.86105633

ufv76 Supermercado-Escola wp_ufv76 -20.76464126 -42.86814809

ufv77 Teatro do DED/Anexo ao DED wp_ufv77 -20.75988605 -42.86940336

ufv78 Tutoria - Casa Amarela wp_ufv78 -20.76070869 -42.86631882

ufv79 Unidade dos Programas Psicossociais (UPS) wp_ufv79 -20.76691348 -42.87113607

ufv80 Usina de Café wp_ufv80 -20.76744015 -42.87048161

ufv81 Viveiro de Mudas (DEF/IEF) wp_ufv81 -20.77400579 -42.87637711

Vila Giannetti

41


vila1 Alojamento Intercâmbio/Grupo de Escoteiros wp_vila1 -20.75442901 -42.87373814

vila2 Arquivo Central e Histórico (DAH) wp_vila2 -20.75456016 -42.87416455

vila3 ASPUV wp_vila3 -20.75540867 -42.87369187

vila4 Associação de Ex-Alunos wp_vila4 -20.75466036 -42.87281796

vila5 Biofármacos (DBB) wp_vila5 -20.75438998 -42.87388993

vila6 Bromeliário (DBV) wp_vila6 -20.75408139 -42.87074855

vila7 Casa de Hóspedes wp_vila7 -20.75510897 -42.87346597

vila8 Casa do Design (DAU) wp_vila8 -20.75444319 -42.87291847

vila9 Centro de Diagnose de Insetos/Pragas (DBA) wp_vila9 -20.75395520 -42.87125661

vila10 DEQ/IBGE wp_vila10 -20.75422418 -42.87443571

vila11 Divisão de Assuntos Culturais wp_vila11 -20.75557250 -42.87414320

vila12 EMATER wp_vila12 -20.75432616 -42.87494729

vila13 EMATER - Escritório Local wp_vila13 -20.75439463 -42.87190353

vila14 EMATER - Regional/MG wp_vila14 -20.75445457 -42.87207231

vila15 EPAMIG wp_vila15 -20.75450052 -42.87226887

vila16 EPAMIG wp_vila16 -20.75455646 -42.87246543

vila17 FRATEVI/ Divisão de Rádio e Televisão (RTV/CCS) Administração/Coordenação wp_vila17 -20.75418523 -42.87118856

vila18 FRATEVI/RTV/CCS - Estúdio TV Viçosa wp_vila18 -20.75429410 -42.87153155

vila19 FRATEVI/RTV/CCS - Redação/Jornalismo/TV Viçosa wp_vila19 -20.75423197 -42.87133679

vila20 FRUTORG/FINEP/UFV-FUNARBE wp_vila20 -20.75434234 -42.87407768

vila21 Grupo Entre Folhas (DFT) wp_vila21 -20.75404450 -42.87499145

vila22 Grupo Folhas da Vida wp_vila22 -20.75420727 -42.87525925

vila23 IEF - Instituto Estadual de Florestas wp_vila23 -20.75527041 -42.87357049

vila24 IMA - Instituto Mineiro de Agropecuária wp_vila24 -20.75406312 -42.87162158

vila25 Lab. de Formação Pedagógica em Lic. de Letras wp_vila25 -20.75446852 -42.87455895

vila26 Lab. Do Curso de Comunicação/Jornalismo/TV Viçosa wp_vila26 -20.75413858 -42.87101498

vila27 Laboratório de Matéria Orgânica (DPS) wp_vila27 -20.75451507 -42.87436397

vila28 Laboratório de Prática Jurídica (DPD) wp_vila28 -20.75460442 -42.87265558

vila29 Lote04 - Viveiro de Mudas wp_vila29 -20.75543280 -42.87404226

42


vila30 LUDOTECA wp_vila30 -20.75591491 -42.87439650

vila31 MICOTECA - Laboratório de Diagnose (DFP) wp_vila31 -20.75400791 -42.87144178

vila32 Ministério da Agricultura wp_vila32 -20.75390141 -42.87107021

vila33 Museu da UFV wp_vila33 -20.75566860 -42.87384260

vila34 Museu de Anatomia Comparada - MAC - CETAS (DBA/DVT/IEF/IBAMA) wp_vila34 -20.75439781 -42.87272123

vila35 Museu de Ciências da Terra "Alexis Dorofeef" (DPS) wp_vila35 -20.75428648 -42.87235689

vila36 Museu de Zoologia (DBA) wp_vila36 -20.75422876 -42.87218782

vila37 NEPUT (DPS) wp_vila37 -20.75440102 -42.87475213

vila38 NESSA - Núcleo de Estudos em Sanidade Avícola (DVT) wp_vila38 -20.75411582 -42.87180675

vila39 NIPA - Núcleo Interdisciplinar de Pesquisa Aplicada wp_vila39 -20.75427968 -42.87424999

vila40 Núcleo de Análises de Biomoléculas wp_vila40 -20.75410665 -42.87480590

vila41 Núcleo de Microscopia eletrônica e Microanálise (CCB) wp_vila41 -20.75416476 -42.87461849

vila42 Núcleo de Saúde Pública (DNS) wp_vila42 -20.75512505 -42.87385232

vila43 Núcleo de Saúde Pública (DNS) wp_vila43 -20.75496683 -42.87372915

vila44 NUGEO - Núcleo de Geoprocessamento (DPS) wp_vila44 -20.75465535 -42.87380214

vila45 Oficina de Criatividade wp_vila45 -20.75575428 -42.87426221

vila46 PET Biologia wp_vila46 -20.75434128 -42.87254212

vila47 PINACOTECA wp_vila47 -20.75528933 -42.87395343

vila48 Programa de Educação de Adultos wp_vila48 -20.75417605 -42.87197581

vila49 Projeto Veredas (DPE) wp_vila49 -20.75460775 -42.87399149

vila50 Rádio Universitária FM (RTV/CCS) Oficiana e Almoxarifado wp_vila50 -20.75433432 -42.87170897

vila51 SINSUV wp_vila51 -20.75427029 -42.87511325

vila52 Unidade Interdisciplinar de Estudos do Desenvolvimento Humano e Social (DED) wp_vila52 -20.75398815 -42.87516106

USANDO API DO GOOGLE MAPS PARA CRIAR UM MAPA INTERATIVO

Documents

Transcript of USANDO API DO GOOGLE MAPS PARA CRIAR UM MAPA INTERATIVO