UNIVERSIDADE TECNOLGICA FEDERAL DO PARAN UTFPR

CURSO SUPERIOR DE TECNOLOGIA EM ANLISE E DESENVOLVIMENTO

DE SISTEMAS

PETERSON RICARDO MAIER SCHMITT

APLICAO WEB UTILIZANDO API GOOGLE MAPS

TRABALHO DE DIPLOMAO

MEDIANEIRA
2013
 PETERSON RICARDO MAIER SCHMITT

APLICAO WEB UTILIZANDO API GOOGLE MAPS

Trabalho de diplomao apresentado

disciplina de Trabalho de Diplomao,
do Curso Superior de Tecnologia em
Anlise e Desenvolvimento de
Sistemas da Universidade Tecnolgica
Federal do Paran UTFPR, como
requisito parcial para obteno do ttulo
de Tecnlogo.
Orientador: Prof. Dr. Claudio L. Bazzi

MEDIANEIRA
2013
 Ministrio da Educao
Universidade Tecnolgica Federal do Paran
Diretoria de Graduao e Educao Profissional
Curso Superior de Tecnologia em Anlise e Desenvolvimento de
Sistemas

TERMO DE APROVAO

Aplicao web utilizando API GOOGLE MAPS

Por
Peterson Ricardo Maier Schmitt

Este Trabalho de Diplomao (TD) foi apresentado s 15:40 h do dia 25 de maro de

2012 como requisito parcial para a obteno do ttulo de Tecnlogo no Curso
Superior de Tecnologia em Anlise e Desenvolvimento de Sistemas, da
Universidade Tecnolgica Federal do Paran, Campus Medianeira. O acadmico foi
arguido pela Banca Examinadora composta pelos professores abaixo assinados.
Aps deliberao, a Banca Examinadora considerou o trabalho aprovado com louvor
e mrito.

Prof. Dr. Cludio Leones Bazzi Prof. Dr. Neylor Michel

UTFPR Campus Medianeira UTFPR Campus Medianeira
(Orientador) (Convidado)

Prof. Msc. Fernando Schtz Prof. Msc. Juliano Rodrigo Lamb

UTFPR Campus Medianeira UTFPR Campus Medianeira
(Convidado) (Responsvel pelas atividades de TCC)
Nem tudo na vida se resolve com dois cliques.
Wendel Henrique Ferreira
 RESUMO

SCHMITT, Peterson Ricardo Maier. Aplicao web utilizando API Google Maps.
Trabalho de Concluso de Curso (Tecnologia em Anlise e Desenvolvimento
de Sistemas), Universidade Tecnolgica Federal do Paran. Medianeira 2013.

Este trabalho apresenta um estudo bem como desenvolvimento baseado sobre

a API do Google Maps para desenvolvimento WEB, mostrando um breve
histrico conceitos de banco de dados relacionais, banco de dados
geogrficos, API googlemaps, PHP, Postgre. Ao final mostrar exemplos de uma
aplicao, utilizando os recursos anteriormente citados, que visam facilidade
em diversas pesquisas de localidades com maior xito e confiabilidade.

Palavras-chave: PHP, JSON, JQUERY, JAVASCRIPT, DOM, Mapas,

PostgreSQL, Postgis.
 ABSTRACT

SCHMITT, Peterson Ricardo Maier. Web application using Google Maps API.
Trabalho de Concluso de Curso (Technology Analysis and Systems
Development), Federal Technological University of Paran. Medianeira 2013.

This paper presents a study and development based on Google Maps API for
Web development, showing a brief historical concepts of relational databases,
geographic database, googlemaps API, PHP, Postgre. At the end show
examples of an application using the resources mentioned above, aimed at
ease in various research locations with greater success and reliability.

Keywords: PHP, JSON, JQUERY, JAVASCRIPT, DOM, Mapas, PostgreSQL,

Postgis.
 LISTA DE FIGURAS

Figura 1 - Tipos de Dados Geomtricos ............................................................................... 14

Figura 2 Parte di cdigo para conexo com o banco de dados .................................... 20

Figura 3 - Parte do cdigo para inicializar o mapa.............................................................. 21

Figura 4 - Parte do cdigo onde criado o formulrio ....................................................... 22

Figura 5 - Funo para criar pontos e exibir infowindows ................................................. 22

Figura 6 - Mtodo onde contem a funo ajax para persistir os dados ........................... 23

Figura 7 - Parte do cdigo para gravar pontos .................................................................... 24

Figura 8 - Parte do cdigo usada para criar um polgono .................................................. 24

Figura 9 - Criar um array de um polgono e chamada ajax para persistir os dados ...... 25

Figura 10 - Diagrama de entidade e relacionamento ......................................................... 26

Figura 11 - Diagrama de seqncia adicionar ponto .......................................................... 28

Figura 12 - Diagrama de seqncia adicionar polgono..................................................... 29

Figura 13 - Pgina inicial ......................................................................................................... 29

Figura 14 - Infowindows quando clicado no ponto ou polgono..................................... 30

Figura 15 - Funo ajax para buscar os pontos .................................................................. 31

Figura 16 - Parte do cdigo usada para montar um json de pontos ................................ 31

Figura 17 - Cdigo utilizado para codificar um JSON......................................................... 31

Figura 18 - Representao JSON de pontos ....................................................................... 32

Figura 19 - Adicionando pontos e criando infowindows ..................................................... 32

Figura 20 - Parte do cdigo usada para montar um JSON de polgono.......................... 33

Figura 21 - Representao JSON de polgono.................................................................... 33

Figura 22 - Adicionando as vrtices do polgono ................................................................ 34

Figura 23 - Parte do cdigo para adicionar polgono no mapa ......................................... 34

Figura 24 - Formulrio para adicionar um ponto ................................................................. 35

Figura 25 - Formulrio para adicionar um polgono ............................................................ 35

 LISTA DE SIGLAS

AJAX Asynchronous JavaScript + XML

API Application Programming Interface

BD Banco de dados

BSD Berkeley Software Distribution

CSS Cascading Style Sheets

DOM Document Object Model

GIS Geographic Information System

GNU General Public License

GPS Sistemas de Posicionamento Global

HTML HyperText Markup Language

JS JavaScript

JSON JavaScript Object Notation

MER Modelo Entidade-Relacionamento

MVC Model View Controller

PHP Personal Hypertext Preprocessor

SGBD Sistema de Gerenciamento de Banco de Dados

SGML Standard Generalized Markup Language

SIG Sistemas de Informao Geogrficas

SQL Structured Query Language

UML Unified Modeling Language

UTFPR Universidade Tecnolgica Federal do Paran

WKT Well-Known Text

WWW World Wide Web

 SUMRIO

1 INTRODUO ................................................................................................ 1

1.1 OBJETIVOS ........................................................................................................................... 1

1.1.1 Objetivo Geral ................................................................................................................ 1

1.1.2 Objetivos Especficos ..................................................................................................... 2

1.2 JUSTIFICATIVA ..................................................................................................................... 2

2 REFERENCIAL TERICO .............................................................................. 4

2.1 PHP (Hypertext Preprocessor) ............................................................................................ 4

2.2 HTML (Hyper Text Markup Language) ................................................................................ 5

2.3 JAVASCRIPT ......................................................................................................................... 6

2.4 JQUERY ................................................................................................................................ 7

2.5 AJAX .................................................................................................................................... 8

2.6 JSON .................................................................................................................................... 8

2.7 DOM .................................................................................................................................... 9

2.8 BANCOS DE DADOS RELACIONAL........................................................................................ 9

2.9 BANCO DE DADOS GEOGRFICO ...................................................................................... 10

2.9.1 Sistema gerenciadores de banco de dados ................................................................. 11

2.10 SISTEMA DE INFORMAO GEOGRFICA ......................................................................... 12

2.11 POSTGRESQL ..................................................................................................................... 12

2.11.1 Postgis .......................................................................................................................... 14

2.12 GOOGLE MAPS .................................................................................................................. 16

3 MATERIAL E MTODOS ..................................................................................................... 19

3.2 ESTRUTURA DA APLICAO .............................................................................................. 19

3.2.1 Conexo com o banco.................................................................................................. 19

3.2.2 Integrao com Google Maps API v3 ........................................................................... 20

4 RESULTADOS E DISCUSSO ............................................................................................... 26

4.2 ESTRUTURA DO BANCO DE DADOS .................................................................................. 26

4.3 ANLISE E PROJETO .......................................................................................................... 27

4.3.1 Caso de uso: Adicionar ponto ...................................................................................... 27

4.3.2 Caso de uso: Adicionar polgono ................................................................................. 28

4.4 APLICAO WEB ............................................................................................................... 29

5 CONCLUSO ...................................................................................................................... 36

5.2 TRABALHOS FUTUROS ...................................................................................................... 36

6 REFERNCIAS BIBLIOGRFICAS ......................................................................................... 37

 1

1 INTRODUO

Para que haja um aumento de produtividade considervel em ambientes de

desenvolvimento web, preciso que os desenvolvedores web, busquem inmeras
ferramentas e softwares visando rapidez, confiabilidade e xito. Para que isso ocorra
surgem as APIs, que esto cada vez mais acessveis para os programadores,
permitindo a utilizao do mesmo em softwares, como o uso da API do Google Maps
para desenvolvimento web.
Atualmente uma verdadeira evoluo est acontecendo. Pessoas que at
ento no tinham qualquer contato com ferramentas GIS, de uma hora para outra
podem ter acesso qualquer parte do planeta por meio de aplicaes que misturam
imagens de satlite, modelos 3D e GPS, sendo que o usurio necessita apenas ter
conexo Internet. Essas tecnologias de geoprocessamento tornaram-se
indispensveis para profissionais de diversas reas. Neste contexto que surge a
necessidade de utilizar e desenvolver produtos de localizao geogrfica e anlise
espacial para o ambiente web.
A cada dia fica mais comum estar em contato com tecnologias relacionadas
a geoprocessamento, e a maioria das vezes os usurios no sabem que as mesmas
esto de alguma forma sendo utilizadas.

1.1 OBJETIVOS

1.1.1 Objetivo Geral

Realizar um estudo sobre geoprocessamento fazendo uso da API Google

Maps, apresentando exemplos das principais funcionalidades desta API, mostrando
como a mesma pode ser utilizada em aplicaes web.
 2

1.1.2 Objetivos Especficos

Construir um referencial terico sobre tecnologias voltadas a

programao para geoprocessamento;
Desenvolver a anlise e projeto de uma aplicao que contemplem o
uso de tecnologias de geoprocessamento, utilizando linguagem UML;
Desenvolver uma aplicao propostas fazendo uso da linguagem de
programao PHP, e tecnologias como Javascript, JSON, JQuery e Google Maps
API v3;

1.2 JUSTIFICATIVA

Uma API (Application Programming Interface) uma interface que pode

estar conectada a diferentes sistemas e aplicativos, no entanto, para o usurio isto
imperceptvel pelo fato de estar rodando por trs de tudo, enquanto o usurio
usufrui de um aplicativo ou site, a sua API pode estar conectada a diversos outros
sistemas e aplicativos, sem que o usurio perceba.
Cada vez mais o uso de SIG (Sistema de Informaes Geogrficas) tem se
tornado mais visvel e comum em sistemas e sites com o uso da API do Google
Maps, permitindo assim a criao de mapas com localizao definida, controle de
zoom, tipos de mapa, gerao de rotas, pesquisa por estabelecimentos entre
outros.
Usar essa interface de suma importncia, pois atravs da mesma pode-se
ter facilidade e comodidade em encontrar inmeros locais, com maior rapidez e
eficcia.
A cada dia o usurio torna-se mais exigente e procura maior xito em suas
pesquisas, utilizando a API Google Maps estas buscas se tornam mais acessvel
satisfazendo assim o usurio.
Este trabalho tem como objetivo a realizao de um estudo das linguagens,
PHP, HTML, CSS, JavaScript e o banco de dados PostgreSQL, aplicando-as em
um estudo experimental voltado ao desenvolvimento de uma aplicao web para
 3

mapeamento geogrfico como o Google Maps, onde o usurio poder cadastrar

pontos e polgonos no mapa, cadastrando as principais caractersticas de cada um.
 4

2 REFERENCIAL TERICO

2.1 PHP (Hypertext Preprocessor)

A linguagem PHP surgiu por volta de 1994, o criador foi Rasmus Lerdorf, foi
criada para suprir as necessidades do desenvolvedor, e aperfeioada para se
adequar s necessidades de sua crescente comunidade, Segundo Darlan (2007), as
primeiras verses no foram disponibilizadas, tendo sido utilizadas na home - page
apenas para que pudessem ter informaes sobre as visitas que estavam sendo
feitas.
Para Silveira (2010), com o crescimento da popularidade do PHP, um grupo
de desenvolvedores criou uma API para ele transformando-o no PHP3. Para
melhorar a sua performance, o scripts foi completamente reescrito, surgindo dessa
forma o PHP4, muito mais veloz do que o PHP3. Essa verso passou a incluir
suporte a gerenciamento de sesses, uma caracterstica antes presente apenas no
ASP.
De acordo com Milani (2010), ao longo do tempo o PHP teve um grande
crescimento e aumento de popularidade, sendo que em junho de 2004 foi lanada a
verso 5 do PHP, introduzindo um novo modelo de orientao a objetos, incluindo a
reformulao dos construtores e adio de destrutores, visibilidade de acesso,
abstrao de objeto e interfaces de objetos.

Para Freitas (2006), as principais vantagens para a utilizao da linguagem

PHP so:

linguagem de fcil aprendizado;

performance e estabilidade excelentes;
cdigo aberto;
suporte nos principais servidores do mercado;
suporta conexo com os principais bancos de dados do mercado;
multiplataforma;
 5

suporta grande variedade de protocolos; e

no precisa ser compilado, por ser uma linguagem interpretada.

Segundo Freitas (2006), o PHP difere-se de outras linguagens, pois seu

cdigo escrito embutido a um arquivo HTML. O que diferencia o PHP do
JavaScript no lado do cliente que o cliente recebe somente a resposta, no tendo
acesso ao cdigo que so interpretados no servidor.
Freitas (2006), apresentam as principais tarefas da linguagem PHP, so elas:
Funes de correio eletrnico: pode-se enviar um e-mail a uma pessoa
ou uma lista parametrizando toda uma srie de aspectos, tais como assunto, pessoa
a responder e outras funes;
Gesto de bases de dados: oferece interface para o acesso a maioria
de dados comerciais e todas as bases possveis em sistemas Microsoft, podendo
editar o contedo do site;
Gesto de arquivos: pode realizar qualquer tipo de operao como
criar, modificar, mover, apagar a partir das funes para gesto de arquivos.
Tratamento de Imagens: uniformizar em tamanho e formatos vrias
imagens recebidas automaticamente atravs do PHP e pode-se tambm criar botes
que realizam uma nica chamada a uma funo.

2.2 HTML (Hyper Text Markup Language)

Para Fernandes (2008), atravs da World Wide Web possvel acessar

informaes armazenadas em documentos escritos usando-se uma linguagem
chamada Hyper Text Markup Language (HTML). Esta linguagem, inventada por Tim
Berners-Lee no Laboratrio CERN na Sua, composta por comandos atravs dos
quais possvel definir a aparncia e a estrutura de documentos. Albuquerque
(2004), destaca que a linguagem HTML baseada na linguagem Standard
Generalized Markup Language (SGML).
Segundo Ferreira (2012), desde o lanamento do HTML4, o W3C alertou os
desenvolvedores sobre boas prticas que deveriam ser seguidas no
 6

desenvolvimento dos cdigos. Contudo, o HTML4 no trazia diferencial e tambm

no facilitava a manipulao de elementos JavaScript e CSS.
Para Oliveira (2011), o HTML 5 (Hypertext Markup Language) a quinta verso
da linguagem HTML. Esta nova verso traz consigo importantes mudanas quanto
ao papel do HTML no mundo da web, trazendo novas funcionalidades como
semntica e acessibilidade, com novos recursos antes s possveis por meio de
outras tecnologias, e trazendo uma importante disseminao dentre todos os novos
navegadores de internet, tornando-o dessa forma mais universal.
Segundo Ferreira e Eis (2010), com a evoluo da linguagem padro para web
pde-se eliminar a necessidade de plug-ins para aplicaes multimdia em
navegadores. Crticos consideram a tecnologia como um forte concorrente ao Flash,
da Adobe, ao Silverlight, da Microsoft, e ao recente JavaFX, da Sun (Oracle).
De acordo com Martins (2010), aps dez anos sem atualizaes, a forma como
se escreve pginas na Internet passa por uma significativa transformao. O HTML5
oferece uma experincia web totalmente diferente para usurios tornando a
navegao mais rpida, simples e melhorando a performance de uma pgina web,
embora exista um longo caminho para ser finalizado, muitos navegadores
importantes j implementaram grandes partes da linguagem, incluindo tags de vdeo
e suporte tecnologia Canvas.

2.3 JAVASCRIPT

Para Majour (2008), JavaScript uma linguagem de Script projetada

principalmente para adicionar interatividade a uma pgina web alm da criao de
aplicativos. Essa linguagem foi implementada pela Netscape Communications em
1995. A linguagem de Script usada em milhes de pginas web e aplicativos de
servidor em todo o mundo.
Embora essa linguagem compartilha muitas caractersticas e estruturas da
linguagem Java, foi desenvolvida de forma independente. JavaScript pode interagir
com o cdigo HTML, permitindo que autores da Web possam deixar seus sites mais
robustos com contedos mais dinmicos. JavaScript apoiado por uma srie de
empresas de software e uma linguagem aberta que qualquer um pode utilizar sem
precisar adquirir uma licena.
 7

2.4 JQUERY

De acordo com Belem (2010), JQuery uma biblioteca JavaScript, que

simplifica o desenvolvimento de aplicaes web. JQuery auxilia os programadores a
manter o cdigo simples e legvel alm de serem reutilizveis. JQuery simplifica o
processos em JavaScript, como chamadas de AJAX e manipulao de DOM
(Document Object Model).
Para Silva (2008), as principais vantagens do JQuery sobre JavaScript so:
acesso direto a qualquer componente do DOM, ou seja, no h
necessidade de vrias linhas de cdigo para acessar determinados pontos no DOM;
o uso de regras de estilo no sofre qualquer tipo de limitao devido as
inconsistncias dos navegadores. Mesmo os seletores CSS3 podem ser usados
sem qualquer restrio;
manipulao de contedos, sem limitaes, com algumas poucas
linhas de cdigo;
suporte para toda a gama de eventos de interao com o usurio sem
limitaes impostas pelos navegadores;
possibilidade de inserir uma grande variedade de efeitos de animao
com uma simples linha de cdigo;
uso simplificado e sem restries com AJAX e linguagens de
programao, como PHP e ASP;
simplificao na criao de scripts; e
emprego cross-browser.

De acordo com Rigoni (2009), JQuery est em conformidade com todos os

padres web estipulados pela W3C, ela oferece total suporte a CSS3, uma
biblioteca compatvel com qualquer navegador (cross browser). JQuery visa
incrementar de forma progressiva e no obstrutiva a usabilidade e acessibilidade, as
principais caractersticas do JQuery so:
Utiliza seletores CSS para busca de elementos DOM na rvore HTML;
Arquitetura simples para instalao de plugins e criao de plugins;
No necessrio a criao de loops para busca de elementos na
rvore DOM;
 8

Programao encadeada, pois todo mtodo retorna um objeto;

Extensvel, permite o usurio estender a prpria biblioteca e customizar
a seu modo.

Para Alvarez (2009), outra forte caracterstica do JQuery que ela torna
mais fcil para escrever JavaScript que funciona em muitos navegadores diferentes.
Incompatibilidades entre os navegadores populares como o IE (Internet Explorer) e
Firefox significa que muitas vezes o usurio precisa escrever os diferentes partes de
cdigo JavaScript para cada navegador. Com JQuery, no entanto, apenas chamar
a funo JQuery apropriado e deixar que JQuery contorna o cdigo executando em
diferentes navegadores.

2.5 AJAX

AJAX (Asynchronous JavaScript + XML), termo criado por Jesse James

Garrett em 2005, que descreve uma "nova" abordagem de como usar uma srie de
tecnologias em conjunto, incluindo: HTML ou XHTML, CSS, JavaScript, o DOM,
XML, XSLT e, o mais importante objeto XMLHttpRequest.
Para Goldbach (2009), quando essas tecnologias so combinadas no
modelo AJAX, as aplicaes web so capazes de fazer rpidas atualizaes
incrementais para a interface do usurio sem recarregar a pgina inteira do
navegador. Isso torna o aplicativo mais rpido e mais sensvel s aes do usurio.

2.6 JSON

JSON (JavaScript Object Notation) uma estrutura, baseada em texto para

armazenar e transmitir dados estruturados. Ao usar uma sintaxe simples, o usurio
pode facilmente armazenar qualquer coisa a partir de um nico nmero por meio de
Strings, matrizes e objetos usando nada alm de uma seqncia de texto simples. O
usurio tambm pode alinhar matrizes e objetos, o que lhe permite criar estruturas
complexas de dados.
 9

Uma vez criada a String JSON, pode-se envi-la para outra aplicao ou
computador, porque se trata de texto simples.
As principais vantagens do JSON so:
compacto;
de fcil entendimento para leitura como para desenvolvimento;
ele mapeia muito facilmente as estruturas de dados usadas por muitas
linguagens de programao (nmeros, strings, booleanos, nulos, matrizes e matrizes
associativas); e
quase todas as linguagens de programao contem funes ou
bibliotecas que podem ler e escrever estruturas JSON.

2.7 DOM

Para Balduino (2012), a representao interna de uma pgina chamada de

DOM, que significa Document Object Model, que criada automaticamente pelo
browser toda vez que carregamos um arquivo XML ou HTML vlido. Esse arquivo
chamado de Documento, e cada item dentro dele (textos, imagens, botes, caixas
de texto) chamado genericamente de Elemento. Quando for utilizado um
JavaScript para ler ou escrever dados em numa pgina HTML, estamos na verdade
manipulando um elemento DOM.

2.8 BANCOS DE DADOS RELACIONAL

De acordo com Heuse (1998), os sistemas de gerncia de banco de dados

(SGBD) surgiram no incio da dcada de 70 com o objetivo de facilitar a
programao de aplicaes de banco de dados (BD). Os primeiros sistemas eram
caros e difceis de usar, requerendo especialistas treinados para usar o SGBD
especfico.
O modelo de banco de dados Relacional introduzido por Coddem 1970, o
mais simples, com estrutura de dados uniforme, e tambm o mais formal.
Segundo Otavio (2003), enfatiza que no modelo de dados relacional as
informaes so organizados e agrupados em tabelas (relacionais). Essas tabelas
 10

guardam estes dados e podem possuir referncia a outra tabela. Assim o banco
todo no passa de uma srie de tabelas que se referenciam.
Para Otavio (2003), o modelo relacional uma teoria matemtica para
descrever como as bases de dados devem funcionar. Embora esta teoria seja a
base para o software de banco de dados relacionais, poucos sistemas de gesto de
bases de dados seguem o modelo de forma restrita, e todos tm funcionalidades
que violam a teoria, desta forma variando a complexidade e o poder.
De acordo com Dantas (2002), a arquitetura ANSI / SPARC, os bancos de
dados relacionais consistem de trs componentes:
uma coleo de estruturas de dados, formalmente chamadas de
relaes, ou informalmente tabelas, compondo a parte do nvel conceitual;

uma coleo dos operadores, a lgebra e o clculo relacionais, que

constituem a base da linguagem SQL; e
uma coleo de restries da integridade, definindo o conjunto
consistente de estados de base de dados e de alteraes de estados. As restries
de integridade podem ser do tipo domnio, atributo, relvar (varivel de
relacionamento) e restries de base de dados.

2.9 BANCO DE DADOS GEOGRFICO

Segundo Ferreira (2006), os dados geogrficos so aqueles que possuem

uma dimenso espacial, ou uma localizao, diretamente ligada ao mundo
geogrfico real, como por exemplo, imagens de satlites de sensoriamento remoto.
Bancos de dados Geogrficos (BDG) so colees de dados geo referenciados,
manipulados por Sistemas de Informao Geogrficas (SIG). Dentre as finalidades e
possibilidades que as bases de dados com geometria oferecem, pode-se citar as de
anlise e consultas espaciais. possvel calcular por exemplo, reas, distncias e
centrides, alm de realizar a gerao de buffers e outras operaes entre as
geometrias.
De acordo com Ferreira (2006), a evoluo cientfica e tecnolgica dos
ltimos anos, impulsionada principalmente pelas necessidades de padronizao de
dados e a interoperabilidade entre os programas de SIG, fez surgir o conceito de
 11

bancos de dados geogrficos. Em um banco de dados geogrficos, as geometrias e

as descries dos elementos que representam as caractersticas do mundo real que
so armazenadas, gerenciadas e processadas em um nico ambiente
computacional, o Sistema Gerenciador de Bancos de Dados Relacional (SGBDR).
Muitos desses SGBDRs suportam dados geogrficos a partir da utilizao de drivers
especficos, entre eles se pode destacar o PostgreSQL com o driver PostGIS, o
Oracle com os drivers Spatial e SDE. O driver tem a funo de realizar converso,
insero, recuperao e extrao de dados geogrficos junto ao SGBD.
Para Jnior (2004), com s restries existentes nos SGBDs convencionais
no instante do tratamento de tipos de dados complexos, mais exatamente de dados
espaciais, iniciaram estudos para integrao dos dados espaciais, que armazenam
as informaes da localizao do objeto, e dos dados alfanumricos, que contem
informaes que descrevem o objeto.
Segundo Jnior (2004), o Modelo Objeto-Relacional, que integra as
funcionalidades do Modelo Relacional com o da Orientao a Objetos, permite a
definio de Tipos Abstratos de Dados e a Manipulao de Objetos Complexos.
Essas caractersticas fazem com que este modelo consiga atender, em grande
parte, as exigncias impostas pelos SIGs.

2.9.1 Sistema gerenciadores de banco de dados

De acordo com Cmara e Queiros (2005), um SGBD um software ou uma

coleo de programas que ajudaro no gerenciamento do Banco de Dados. O
SGBD serve para facilitar o processo de definio, construo e manipulao do
Banco.
Para Kugler (2010), a principal diferena entre os SIGs a forma como os
dados geogrficos so gerenciados. Segundo Kugler h basicamente trs diferentes
arquiteturas de SIG que utilizam recursos de um SGBD: a) dual, b) integrada
baseada em SGBDs relacionais, e c) integrada baseada em extenses espaciais
sobre SGBDs objeto-relacionais.
 12

2.10 SISTEMA DE INFORMAO GEOGRFICA

Segundo Cmara (1999), um Sistema de Informao Geogrfica ou

Geographic Information System (GIS) um termo designado para programas que
realizam a manipulao e tratamento computacional de dados geogrficos, no se
limitando a recuperar apenas dados alfanumricos, mas tambm sua localizao
espacial, disponibilizando ao usurio uma viso mais detalhada. No entanto, se faz
necessrio que os atributos dos dados e a geometria estejam referenciados
geograficamente (dados georreferenciados) e representados em uma projeo
cartogrfica.
Para Pitz (2001), o avano da tecnologia e da cincia nos propiciou novas
ferramentas, equipamentos de alta preciso e tecnologia como, satlites, sistemas
de posicionamento global (GPS), radares e fotografias areas, que nos fornecem
informaes instantneas. Nesse sentido a adoo de Sistemas de Informao
Geogrfica so fundamentais para uma rpida e precisa interpretao destas
informaes.

2.11 POSTGRESQL

Segundo Milani (2008), o PostgreSQL um SGBDR, que utilizado para

armazenar informaes de solues de informtica em todas as reas de negcios
existentes, bem como administrar o acesso a estas informaes.
Para o autor o PostgreSQL um excelente banco de dados com todas as
caractersticas e propriedades necessrias para atender aos mais exigentes padres
de aplicaes do mundo da informtica.
De acordo com Milani (2008), tanto o PostgreSQL quanto a licena BSD
(Berkeley Software Distribution) tiveram origem no mesmo local, a Universidade de
Berkeley, na Califrnia. Para o autor esse o primeiro fator que faz com que o
PostgreSQL utilize esta licena, pois os interesses iniciais da ferramenta e da
licena tinham algo em comum. Mesmo com o cdigo adquirido mais tarde, sua
licena BSD (Berkeley Software Distribution) foi mantida e utilizada at hoje, sendo
atualizada e revisada periodicamente. Diferente de muitos softwares livres existentes
 13

no mercado, o PostgreSQL no utiliza a licena GNU (General Public License) para

regularizar a sua utilizao, mas sim, a licena BSD.
A licena BSD possui menos restries do que as impostas pela licena
GNU, tornando o cdigo muito mais acessvel para diversos tipos de atualizaes,
incluindo a livre utilizao da ferramenta at mesmo para fins comerciais.
O PostgreSQL supera algumas caractersticas do SGBDs no que diz
respeito a compatibilidade de sistemas operacionais, a linguagem de programao,
a plataforma de desenvolvimento e a verso de SQL utilizada (POSTGRESQL,
2009).
De acordo com Milani (2008), h bibliotecas e drivers de conexo para o
PostgreSQL para as principais plataformas e linguagens utilizadas, podendo citar:
PHP, C/C++, Java/JSP, ASP, .NET, Perl, Python, Ruby, TCl e Driver ODBC, entre
outros.
O PostgreSQL uma ferramenta extremamente portvel, disponibilizando
instalao para diversos sistemas operacionais, como por exemplo (linux, unix, mac
OS e windows).
O PostgreSQL um banco de dados que contm as principais
caractersticas desejadas em um banco de dados:
recuperao automtica aps crash de sistema (WAL);
MVCC (controle de concorrncia de multi - verso;
Logging de transaes;
Commit / Rollback / Checkpoints;
Triggers / Stored Procedures;
Constraints / Foreign Keys;
Backup On-line;
tamanho ilimitado de registro; e
mltiplos tipos de ndice;

O PostgreSQL oferece o mais baixo custo total de propriedade (TCO),

reduzindo de forma significativa seus custos de administrao, suporte e
licenciamento e, ao mesmo tempo, fornecendo alta performance, confiabilidade e
escalabilidade.
 14

2.11.1 Postgis

Segundo Queiros (2004), o PostGIS uma extenso do PostgreSQL que

fornece suporte de banco de dados espacial para o PostgreSQL. Isso significa que
ele otimiza PostgreSQL para armazenar e consultar dados relacionados a objetos e
adicionando suporte para as trs caractersticas: tipos espaciais, ndices e funes.
O PostGIS trabalha com objetos espaciais dos tipos: Polygon, Multipolygon,
Point, Multipoint, Linestring, Multilinestring e Geometrycollection.
Na Figura 1, podem ser visualizados os tipos de dados espaciais
suportados pela extenso espacial PostGIS.

Figura 1 - Tipos de Dados Geomtricos

Fonte Queiros, 2004

Segundo Queiros (2004), um dos padres utilizados para representar

objetos espaciais, a forma Well-Known Text (WKT), que inclui informaes sobre o
tipo de objeto e suas coordenadas, os quais determinam os valores utilizados nas
colunas das tabelas, Os principais tipos de objetos so listados a seguir junto com
sua representao na forma WKT:

point: POINT( -20.1929 -44.11221 );

 15

linestring: LINESTRING(0 0,1 1,1 2);

polygon :POLYGON((0 0,4 0,4 4,0 4,0 0),(1 1, 2 1, 2 2, 1 2,1 1));

multipoint: MULTIPOINT(0 0,1 2);

multilinestring : MULTILINESTRING((0 0,1 1,1 2),(2 3,3 2,5 4));

multipolygon : MULTIPOLYGON(((0 0,4 0,4 4,0 4,0 0),(1 1,2 1,2 2,1 2,1
1)), ((-1 -1,-1 -2,-2 -2,-2 -1,-1 -1)));

geometrycollection: GEOMETRYCOLLECTION(POINT(2
3),LINESTRING(2 3,3 4));

Para Andrade(2011), o PostGIS possui vrias funes espaciais que

equivalem s operaes de agregao e juno num banco de dados relacional.
Elas so baseadas em relacionamentos espaciais como: determinao de topologia
entre dois objetos, aritmtica de polgonos, clculo de rea e etc.

Algumas das principais funes de anlises espaciais no PostGIS so:

ST_Disjoint(obj1, obj2): Analisa se dois objetos possuem pontos em

comum e retorna verdadeiro em caso positivo;

ST_Intersects(obj1, obj2): Analisa se dois objetos possuem alguma

interseco e retorna verdadeiro caso haja;

ST_Within(obj1, obj2): Analisa se um objeto est completamente dentro

do segundo objeto;

ST_Crosses(obj1, obj2): Analisa se dois objetos se cruzam e retorna

verdadeiro caso ocorra; e
 16

ST_asText(Geometria): Retorna a representao WKT(Well-Known

Text) da geometria.

2.12 GOOGLE MAPS

Para Erle e Gibson (2006), Google Maps um servio do Google que

oferece uma poderosa tecnologia de mapas amigveis e informaes de locais,
incluindo a localizao, informaes de contatos e direes de conduo.
Segundo Erle e Gibson (2006), Google Maps foi desenvolvida inicialmente
por dois irmos, Lars e Jens Rasmussen, co-fundadores de Where 2 Technologies
uma empresa dedicada a criao de solues de mapeamento. A empresa foi
comprada pela Google em outubro de 2004, e logo depois os dois irmo criaram
Google Maps.
Antes de que tivesse uma API pblica, alguns desenvolvedores descobriram
uma maneira de hackear Google Maps para incorporar os mapas ao seus prprios
sites, Isso levou a Google a concluso que havia a necessidade de uma API pblica,
e no incio de 2005 nas principais localidades dos EUA e posteriormente se
expandiu e passou a servir de referncia para a busca de endereos e pontos de
interesse nos demais centros urbanos de outras naes e continentes - inclusive
cobrindo vrias cidades brasileiras (GOOGLE, 2012).
Com o passar do tempo adicionou novas funcionalidades aos usurios,
gerando comodidade e facilidades nunca antes oferecidas, que vo desde o clculo
de rotas, visualizao 3D de ruas e edificaes, at informaes sobre trfego e
sobre o transporte pblico.
Para Purvis e Sambells (2006), o grande sucesso e aceitao dos usurios,
pouco depois do lanamento oficial do Maps, foi lanada a sua API (Application
Programming Interface), que permite aos usurios inserir mapas em suas pginas
web, contando com a possibilidade de personalizao e customizao dos mapas
como bem entenderem.
Para Erle e Gibson (2006), a funcionalidade principal do Google Maps a
exibio de um mapa no website, partindo de uma coordenada que exibida
centralizada na tela. S isso j basta para usurios que buscam ajuda para
localizao de ruas e regies aos redores do endereo fornecido. No entanto a
 17

ferramenta no se resume somente a isso, e para a aplicao pretendida nesse

projeto nos utilizaremos tambm marcadores, que podem inclusive ser carregados a
partir de um banco de dados e exibidos de forma fixa no mapa a fim de marcar a
posio de pontos de interesse do usurio. Como meio de facilitar o entendimento
por parte do usurio a visualizao do mapa pode ser feita tanto do modo
cartogrfico - onde aparecem as ilustraes das ruas e quadras - como do modo
satlite que exibe uma imagem area da rea selecionada.
A API do Google Maps disponibilizada todos os sites que tem acesso
gratuito para qualquer usurio, mas tambm pode ser utilizada por websites
comerciais ou sem fins lucrativos desde que de acordo com os Termos de Servio
estabelecidos pela Google. Ainda h a possibilidade de uso por sites que cobram
por servios e utilizem o Google Maps, ou sites disponibilizados somente em redes
restritas e intranets.
Segundo Erle e Gibson (2006), alguns dos benefcios bsicos de mapas do
Google que ela uma importante fonte de visitantes para as empresas
geograficamente especficas que tradicional recebem uma grande quantidade de
seu costume de diretrios locais. Ao adicionar os mapas do Google para o seu site,
ele permite que os usurios acessem o contedo interativo, dando altamente
responsiva representao visual de seu local de negcios a fim de obter o seu
interesse. tambm fcil de usar, com ele os usurios podem atingir vrios locais
desejados devido sua capacidade de obter direes com base em modo de
usurio de viagem e lhes permite adicionar um novo destino para suas rotas com
apenas um clique, sempre que o usurio precisa de indicaes, que incluem vrias
paradas. Google maps simplicidade o principal benefcio que no pode ser
negligenciado, pois garante apenas coisas teis sem confundir os usurios com
sinais indesejados.
Google Maps o aplicativo de servio livre e tecnologia para mapeamento
web fornecido pela empresa Google. Antes do Google Maps, era difcil de pesquisar
ou planejar uma viajem por meio de a p, carro ou nibus. Mas o Google Maps torna
mais fcil, oferecendo os mapas de ruas para viajar a p, de carro ou transporte
pblico, fornece trs visualizaes diferentes. Existe uma visualizao do mapa
normal, uma vista de imagem por satlite e uma vista terra (Google Earth) para
visualizar imagens e terrenos em 3D para poder obter uma vista panormica dessas
imagens e inclin-las, dependendo da necessidade do utilizador. Ela no s fornece
 18

altamente receptivo, interface de mapeamento intuitiva com dados detalhados de rua

incorporados, mas alm disso, oferece aos usurios mapas controles embutidos nos
produtos, para ter total controle sobre a exibio de rua e mapa de navegao.
Google Maps combina todos os dados geogrficos em um nico sistema rpido, de
fcil utilizao acessado por todos os usurios de todos os departamentos.
 19

3 MATERIAL E MTODOS

Neste captulo esto descritos os materiais e mtodos utilizados para o

desenvolvimento da aplicao, do estudo experimental, para ilustrar a integrao
das tecnologias mostradas anteriormente. Essa aplicao consiste de um sistema
onde o usurio pode marcar pontos e polgonos em um mapa e cadastrar os dados
referente ao ponto ou polgono.
A aplicao foi desenvolvida utilizando as tecnologias PHP, HTML, CSS,
JavaScript, JQuery e JSON, foram desenvolvidas atravs da ferramenta Netbeans
na verso 7.0, o banco utilizado foi PostgreSQL na verso 8.4 com a utilizao da
ferramenta PgAdmin III na verso 1.10.5, que a parte administrativa para o banco
PostgreSQL.
Para o ambiente de teste da aplicao nesse estudo foi utilizado um servidor
local atravs do wamp server 2.0, um pacote de distribuio Apache contendo PHP,
POSTGRESQL, entre outros. Nesta verso esto disponveis o Apache 2.2.11, PHP
5.3.0 e PostgreSQL 8.4 porem o PostgreSQL instalado separadamente e ativado
a extenso do mesmo no wamp server.

3.2 ESTRUTURA DA APLICAO

Durante o desenvolvimento da aplicao como citado anteriormente foi

utilizado a ferramenta Netbeans na verso 7.0 e para realizao dos teste o servidor
local Wamp Server 2.0.

3.2.1 Conexo com o banco

Para visualizao e cadastro da aplicao, precisa ser estabelecida uma

conexo com o banco, para obter os dados no caso da visualizao ou inserir em
caso de cadastro.
Por meio da Figura 2, pode-se visualizar o cdigo de conexo com a base
de dados:
 20

Figura 2 Parte do cdigo para conexo com o banco de dados

A funo pg_connect() e responsvel pela conexo com o banco de dados

para a realizao da conexo necessrio informar os parmetros como servidor,
banco, porta para a conexo, usurio e senha.
pg_connect() abre uma conexo com um servidor de banco de dados
PostgreSQL especificado por connection_string. Retorna um recurso (resource) de
conexo em caso de sucesso. Retorna FALSE se a conexo no pde ser
estabelecida. connection_string deve ser uma string entre aspas duplas (PHP,
2013).

3.2.2 Integrao com Google Maps API v3

Para a criao e visualizao dos pontos e polgonos, foram criados trs

arquivos JavaScript: polygon.js, marker.js e main.js. Esses arquivos implementa
todas as funes que foram utilizadas no desenvolvimento da aplicao e
carregado junto com a pgina principal da aplicao. Para ter um melhor
entendimento da proposta do trabalho ser mostrado partes dos cdigo que referem-
se s funes do JavaScript.
A figura 3 mostra uma parte do cdigo da funo initialize() que chamado
no momento em que a pagina carregada e executa as funes que criam o mapa e
exibe o mesmo na tela.
Nas linhas 13 a 17 criado uma varivel mapOptions onde ser
armazenadas as opes do mapa para configurar a aparncia. Contendo zoom
inicial, ponto central e tipo do mapa. Na linha 14 representa o nvel de aproximao
 21

do mapa, na linha 15 a opo center recebe um objeto da classe

google.maps.LatLng, onde os parmetros so valores de latitude e longitude que
representam a localizao inicial do mapa, na linha 16 a opo mapTypeId exibe o
tipo de mapa que so blocos 2D padro do Google Maps, na linha 19 define uma
varivel map e atribui essa varivel a um novo objeto da classe google.maps.Map,
tambm so enviadas as opes definidas para o mapa na varivel mapOptions.
Essas opes sero usadas para iniciar as propriedades do mapa.

Figura 3 - Parte do cdigo para inicializar o mapa

Um componente do Google Maps utilizado o infowindows que no foi

somente utilizado para exibir informaes, no nosso caso tambm foi utilizado para
carregar um formulrio onde ser enviada informaes para serem persistidas,
conforme mostrado na figura 4.
Na linha 30 a linha 51 criado o formulrio com informaes bsicas para o
cadastro, que sero utilizadas para o cadastro de pontos e polgonos, na linha 53 a
55 o formulrio adicionado a infowindows, para posteriormente ser exibida
quando for adicionado um ponto ou um polgono.
 22

Figura 4 - Parte do cdigo onde criado o formulrio

A funo que permite criar pontos no mapa mostrada na figura 5, entre a

linha 57 e 67 definido um evento click no mapa, onde a linha 59 o ponto onde
foi clicado no mapa, na linha 60 define em qual mapa ser adicionado o ponto, na
linha 61 o cone que ir aparecer que no nosso caso foi alterado no o cone
padro. Entre a linha 64 e 66 outro evento click porem no e mais no mapa e sim
no ponto em que acabamos de adicionar, que ao ser clicado ira abrir a infowindows
com o formulrio que foi criado conforme a figura 5, na linha 65 executado o
funo infowindows.open que abre um balo com o formulrio de cadastro.

Figura 5 - Funo para criar pontos e exibir infowindows

Na figura 4 apresentada anteriormente na linha 49 na ao onClick do

boto a chamada da funo salvarDados(), o cdigo dessa funo e mostrado na
figura 9, entre as linhas 72 e 76 recupera os valores dos inputs atravs do name e
 23

adicionado em uma varivel , na linha 77 para recuperar a latitude e longitude e

executa a funo marker.getPosition(), no intervalo das linhas 79 a 91 criado
uma funo Ajax onde os parmetros so passados pelo mtodo get na url
gravarPontos.php e atribui os valores recuperados entre as linhas 73 e 77 para que
possam ser persistidos.

Figura 6 - Mtodo onde contem a funo ajax para persistir os dados

Na figura 7 mostra parte do cdigo do arquivo gravarPontos.php, na linha

14 cria uma String com a SQL para gravar o ponto no banco, lembrando que a
coluna da tabela pontos do tipo Geometrycollection que aceita qualquer tipo de
objeto desde que seja do tipo ponto ou polgono que as duas formas geomtricas
que sero persistidos nessa tabela, e desde que estejam no formato WKT que
incluem informaes sobre o tipo de objeto e suas coordenadas.
Como o registro a ser persistido do tipo ponto adicionado um objeto do
tipo point passando a latitude e longitude, na linha 17 chama a funo pg_query()
para persistir os dados.
 24

Figura 7 - Parte do cdigo para gravar pontos

Para desenhar um polgono no mapa os procedimentos so semelhantes, no

lugar de criar um objeto do tipo google.maps.Marker criado um objeto do tipo
google.maps.Polygon conforme e mostrado na figura 8, onde na linha 31
strokeWeight a largura da linha do polgono, na linha 32 fillColor a cor do
interior do polgono e a linha 33 strokeColor a cor da linha do polgono.

Figura 8 - Parte do cdigo usada para criar um polgono

A funo salvarDados() do polgono tambm semelhante a funo para

salvar os pontos, nica diferena que no lugar de passar somente uma latitude e
uma longitude passada uma array com todas as latitudes e longitudes do polgono
criado, a figura 9 mostra o trecho de cdigo para criar um array com as coordenadas
de um polgono, na linha 116 criado um array para adicionar os pontos do
polgono, entre as linhas 117 e 120 percorrido o for com a quantidades de pontos
que contem o polgono e adicionado em cada posio a latitude e longitude de
cada ponto e na linha 122 adicionado o primeiro ponto para fechar o polgono para
deixar no formato WKT, na linha 126 a url no mais gravarPontos.php e sim
gravarPoligono.php e nos dados na linha 128 passado uma array com as
coordenadas.
 25

Figura 9 - Criar um array de um polgono e chamada ajax para persistir os dados

 26

4 RESULTADOS E DISCUSSO

Este captulo apresenta os resultados obtidos durante o desenvolvimento da

aplicao Web utilizando a API do Google Maps.

4.2 ESTRUTURA DO BANCO DE DADOS

Para o desenvolvimento da aplicao Web optou-se por utilizar o banco de

dados PostgreSQL, pelo fato do mesmo ser frequentemente utilizado em aplicaes
que utilizam geoprocessamento. A estrutura do banco de dados da aplicao
consiste em quatro tabelas que armazenaro os dados do imvel, tipo do imvel,
finalidade e localizao.
Segundo PONSONI (2009), o MER (Modelo Entidade-Relacionamento) tem
o objetivo de representar as estruturas de dados da forma mais prxima dos
negcios, onde existem trs conceitos:
Entidade: so os objetos;
Atributos: as caractersticas dos objetos; e
Relacionamentos: a relao entre os objetos.
A figura 10, representa o diagrama de entidade e relacionamento, onde
contem as tabelas do banco de dados.

Figura 10 - Diagrama de entidade e relacionamento

 27

4.3 ANLISE E PROJETO

A partir do diagrama de seqncia possvel conhecer as funcionalidades

da aplicao. Para conhecer melhor o processo e a ordem que as mesmas so
executadas foram levantados alguns requisitos funcionais como:
o sistema deve permitir que o usurio crie pontos no mapa; e
o sistema deve permitir que o usurio crie polgonos no mapa.

4.3.1 Caso de uso: Adicionar ponto

Esse caso de uso refere-se a opo de marcar um pontos no mapa, nesse

caso de uso o ator o usurio que utiliza o sistema.
O fluxo de eventos primrios respeita a seguinte ordem:

1. Usurio seleciona o menu "Incluir ponto";

2. Usurio clica sobre o mapa para adicionar um ponto;
3. Sistema posiciona a imagem de um cone sobre o ponto salvo no
mapa;
3.1. O usurio clica sobre o ponto adicionado;
3.2. Sistema abre um formulrio;
4. Usurio preenche os campos do formulrio;
5. Usurio submete os dados do formulrio;
5.1. Sistema valida as informaes;
6. Sistema salva os dados no banco;
O diagrama de seqncia da figura 11 mostra a interao do usurio no
processo de marcar um ponto e cadastrar as informaes.
 28

Figura 11 - Diagrama de seqncia adicionar ponto

4.3.2 Caso de uso: Adicionar polgono

Esse caso de uso refere-se a opo de marcar um polgono no mapa, nesse

caso de uso o ator o usurio que utiliza o sistema.
O fluxo de eventos primrios respeita a seguinte ordem:

7. Usurio seleciona o menu "Incluir polgono";

8. Usurio clica sobre o mapa para adicionar um polgono;
9. Sistema posiciona polgono salvo no mapa;
9.1. O usurio clica sobre o polgono adicionado;
9.2. Sistema abre um formulrio;
10. Usurio preenche os campos do formulrio;
11. Usurio submete os dados do formulrio;
11.1. Sistema valida as informaes;
12. Sistema salva os dados no banco;

O diagrama de seqncia da figura 12 mostra a interao do usurio no

processo de marcar um polgono e cadastrar as informaes.
 29

Figura 12 - Diagrama de seqncia adicionar polgono

4.4 APLICAO WEB

A aplicao possui um layout simples e intuitivo. Buscou-se utilizar cores no

tom de azul, para no tornar a mesma cansativa e desagradvel aos olhos do
usurio. A figura 13 apresenta a pgina inicial da aplicao onde contem todos os
pontos e polgonos j cadastrados.

Figura 13 - Pgina inicial

 30

N figura 14 onde apresenta todos os pontos e polgonos cadastrados, ao

clicar sobre um icone de imovel (ponto) ou terreno (polgono), aberto um
infowindows com as informaes do imovel, a figura 16 mostra detalhes de quando
clicado sobre um icone de um imovel, os imoveis so dividos por categorias e as
mesmas podem ser vistas com detalhes na figura 16, onde na parte destacada em
vermelho, que cada categoria separada por uma cor para melhor visualizao dos
imoveis no mapa.

Figura 14 - Infowindows quando clicado no ponto ou polgono

Para exibio dos pontos feito uma funo ajax conforme figura 15, onde
na linha 94 chama a url recuperarPontos.php, e a linha 100 o retorno com o
resultado obtido.
 31

Figura 15 - Funo ajax para buscar os pontos

Na figura 16 mostrado um trecho do codigo para criar o JSON, com os

pontos e os dados de cada imvel. Na linha 25 adicionado em um array os dados
retornados na consulta.

Figura 16 - Parte do cdigo usada para montar um json de pontos

A figura 17 retorna a string contendo a representao JSON criada no

cdigo representado na figura 18.

Figura 17 - Cdigo utilizado para codificar um JSON

J na figura 18 o resultado no formato string da funo json_encode que

est presente a partir da verso 5.2 do PHP que retorna uma representao JSON
de um valor, esta funo s funciona com dados codificados em UTF-8. O retorno
para um dado no codificado undefined.
 32

Figura 18 - Representao JSON de pontos

O trecho de cdigo da figura 19 mostra como adicionado os pontos no

mapa apartir do JSON que foi retornado pela funo ajax. Na linha 131 o inicio do
for que percorre todos os locais, na linha 132 a variavel imovel recebe a latitude e
longitude e adiciona num objeto google.maps.LatLng, entre o intervalo das linhas
143 e 140 criado o infowindows para mostrar os detalhes do imvel, na linha 144
criado um objeto do tipo google.maps.Marker, onde adicionado a latitude e
longitude que contem na variavel latLng, seta o mapa, o icone referente ao tipo de
imovel, e um titulo quando o mouse passar sobre o ponto que mostra s o imovel
para venda ou locao.

Figura 19 - Adicionando pontos e criando infowindows

 33

Para adicionar um polgono e semelhante, a funo que faz a requizio ajax

para gerar o JSON semelhante a da figura 15 unica diferea que a url
recuperarPoligono.php, um trecho de cdigo para gerar um JSON de polgono
mostrado na figura 20, a diferena que no passa mais a latitude e longitude em
uma string lat e lng sim uma string coordenadas onde recebe um array com todas
as coordenadas do polgono.

Figura 20 - Parte do cdigo usada para montar um JSON de polgono

Na figura 21 a representao JSON de polgono.

Figura 21 - Representao JSON de polgono

 34

Na figura 22 dentro do lao for percorrida a varivel coordenadas.length

e criado um objeto do tipo google.maps.LatLng passando a latitude e longitude e
adicionando em uma varivel, na linha 51 utilizado o mtodo push que adiciona a
coordenadas na ultima posio.

Figura 22 - Adicionando as vrtices do polgono

Ao fim da sequncia de repetio, executado o cdigo da figura 23, onde

na linha 58, o polgono recebe a coleo de coordenadas que serviro de vrtices
para o polgono. E por fim, a linha 67 representa a parte do cdigo que faz o
polgono aparecer no mapa.

Figura 23 - Parte do cdigo para adicionar polgono no mapa

Na parte de cadastros de pontos e polgonos, quando adicionado um ponto

no mapa ao clicar sobre esse ponto aberto uma infowindows com um formulrio
onde podem ser adicionadas informaes para o cadastro, o resultado pode ser
visualizado conforme Figura 24.
 35

Figura 24 - Formulrio para adicionar um ponto

O mesmo procedimento ocorre quando adicionado um polgono no mapa,

quando ao clicar sobre o polgono aberta uma infowindows com um formulrio
conforme Figura 25.

Figura 25 - Formulrio para adicionar um polgono

 36

5 CONCLUSO

A aplicao desenvolvida nesse trabalho mostra como simples o uso de

API's como a API Google Maps. importante ressaltar a experincia que o
desenvolvedor adquire ao trabalhar em projetos que utilizem servios estveis e
popularizados como o da Google.
Tambm demonstrou a eficincia do uso do banco de dados PostgreSQL
com php visto que o mesmo mais utilizado com a linguagem MySQL, e para que o
mesmo funcionasse teve que ativar as extenses do PostgreSQL.
Outras tecnologias tambm foram teis para agilizar o processo de
desenvolvimento do projeto, como AJAX, JSON e JQuery, onde conseguiu-se
atravs dessas tecnologias uma agilidade no tempo de desenvolvimento.
Durante o processo de desenvolvimento foi gerado uma chave, que
disponibilizada pela prpria Google para qualquer usurio que tenha uma conta, com
a chave em mos qualquer usurio pode ter acesso a API e um total funcionamento
do modulo de mapas.
Esse trabalho permitiu verificar que pode ser desenvolvido um sistema que
use servios disponveis gratuitamente na Internet, deixando a aplicao com bom
desempenho e de fcil manuteno.

5.2 TRABALHOS FUTUROS

Com esse trabalho, surgiu a idia de implementar uma aplicao mais

robusta e com mais funcionalidades para o ramo imobilirio, com design responsivo,
que alm da aplicao WEB tambm contenha uma aplicao mvel desenvolvida
em ANDROID que faa uso da API Google Maps, que alm do contedos tenha uma
opo de rota onde ir traar uma rota do local onde se encontra at o ponto do
imvel de interesse, mostrando detalhes de distancia e melhor caminho, para ter
acesso a esse recurso o sistema ir interagir com o Google Maps Navigator.
 37

6 REFERNCIAS BIBLIOGRFICAS

AJAX. Disponvel em: <http://api.jquery.com/jQuery.ajax/>. Acessado em

01/01/2013.

CMARA, Gilberto, QUEROZ, Gilberto Ribeiro de. Arquitetura de Sistemas de

Informao Geogrfica. Disponvel em:
<http://www.dpi.inpe.br/gilberto/livro/introd/cap3-arquitetura.pdf> Acesso dia:
10/12/2012.

CARLOS, Joo. Diagramas: Sequncia e Atividades, 2005. Disponvel em:

<http://imasters.com.br/artigo/3004/uml/diagramas-sequencia-e-atividades> Acesso

em 26/01/2013.

CSS 3 Preview. Disponvel em:<www.css3.info/preview>. Acesso em 10/09/2012.

DANTAS, Mrio. Tecnologias de Redes de Comunicao e Computadores 2002.

Acessado em 10/12/2012.

DALL'OGLIO ,Pablo. PHP Programando com Orientao a Objetos. Novatec.

2009.

DARLAN, Diego. O que PHP, 2007. Disponvel em:

<http://www.oficinadanet.com.br/artigo/659/o_que_e_php> Acesso em: 20/12/2012.

ERLE, Schuyler; GIBSON, Rich. Google Maps Hacks. 2006. Editora O'Reilly.
Acessado em 10/12/2012

FERREIRA, Nilson. Apostila de sistemas de informao geogrficas, 2006.

Acessado em 10/12/2012.
 38

GOOGLE. Google Maps Api. Disponvel em <http://code.google.com/intl/pt-

BR/apis/maps/documentation/>. Acessado em 25/10/2012.

JSON. Disponvel em: < http://www.json.org/> Acessado em 12/01/2013.

JSON/PHP. Disponvel em: < http://php.net/manual/en/book.json.php> Acessado em

12/01/2013.

JQUERY. Disponvel em: <http://jquery.com/> Acessado em 19/01/2013.

MANUAL DE PHP. Disponvel em: <http://www.php.net/manual/en/preface.php>.

Acessado em 25/10/2012.

MELONI, Julie C. Fundamentos de PHP. Rio de Janeiro: Cincia Moderna, 2000.

PITZ, Jean. Sistemas de informao geogrfica, 2001. Acessado em 10/12/2012.

PONSONI, Viviane. MER e DER, 2009. Disponvel em:

<http://www.devmedia.com.br/mer-e-der/14332> Acessado em 26/01/2013.

POSTGIS DOC. PostGIS 1.5.0 Manual. Disponvel em :

<http://postgis.refractions.net/docs/> Acesso dia 10/12/2012.

POSTGRESQL. Disponvel em: <http://www.postgresql.org/docs/8.2> Acessado em

10/12/2012.

PURVIS, Michael; SAMBELLS, Jeffrey; TURNER, Cameron. Beginning Google

Maps Applications with PHP and Ajax: From Novice to Professional. 2006.

Editora Appress. Acessado em : 10/12/2012

QUEIROS, Juliano. SGBD: O que ?. Disponvel em: <http://espacoinfo.net/o-que-e-

sgbd-bd-ii/> Acessado em: 10/12/2012.

 39

W3 Schools CSS. Disponvel em: <www.w3schools.com/css/> Acesso em

10/09/2012.

W3 Schools PHP. Disponvel em:<www.w3schools.com/php>. Acesso em

0810/2012.

W3C. Disponvel em: <www.w3c.org>. Acessado em: 08/10/2012.