Olá, pessoal! Dando continuidade a série de artigos sobre APEX, hoje vou demonstrar uma solução caseira que construí para utilizar a API do Google MAPs no Oracle APEX.

A ideia é simples: apresentar uma API construída em PL/SQL que permite facilmente utilizar esse poderoso recurso da Google sem a necessidade de conhecer javascript, nem tampouco a documentação técnica do Google MAPs.

Para esse artigo, utilizarei a aplicação de demonstração que criamos nos artigos anteriores. A nossa intenção aqui não é se aprofundar na parte técnica da API do Google Maps; isso já foi feito durante a construção da solução em PL/SQL. Mas caso queria saber mais sobre os recursos do Google MAPs, você pode acessar a documentação da API neste link.

API

O princípio básico dessa solução é utilizar um package que traduza os comandos de Javascript da API do Google MAPs para procedures em PL/SQL de fácil utilização para desenvolvedores Oracle, com as principais funcionalidades do mapa, como por exemplo:

• Posição de um ponto no mapa através de um endereço;
• Traçar rotas entre um endereço e outro.

Assim, quando executar esse package, a solução retornará os comandos em Javascript que montam o mapa, bastando publicá-los utilizando o comando específico para publicação de cada linguagem, que pode ser  PHP, ASP, APEX e etc.

Especificação da package

O funcionamento da solução é baseado na passagens das propriedades, localizações dos pontos e rotas através de variáveis contidas na especificação do package e posteriormente chamando a função principal da solução.

A especificação do package é constituída pelas seguintes variáveis:

• recOptions – Variável com as propriedades de configuração do mapa;
• recLocations – Variável com todos os pontos de localização que serão exibidos no mapa;
• recRoutes – Variável com os pontos de localizações origem e destino da rota que será traçada.

Para saber mais sobre cada propriedade de configuração do mapa, verifique a documentação na especificação do package. Por exemplo, o package será responsável por criar os comandos Javascript, que se chamam “CCO_GOOGLE_MAPS_K”. Veja abaixo um exemplo simples de como utilizá-lo:

declare
result clob;

begin
  -- Call the function
  cco_google_maps_k.recOptions.divHeight := 500;
  cco_google_maps_k.recOptions.divWidth  := 500;  
  cco_google_maps_k.recOptions.Zoom := 'auto';

  --Locations
  cco_google_maps_k.recLocations(1).location_address := 'santos, sp';
  cco_google_maps_k.recLocations(1).location_title := 'title santos, sp';  
  cco_google_maps_k.recLocations(1).location_icon := 'http://www.google.com/mapfiles/markerA.png';   
  cco_google_maps_k.recLocations(2).location_address := 'guarulhos, sp';  
  cco_google_maps_k.recLocations(2).location_icon := 'http://www.google.com/mapfiles/markerB.png';   
  cco_google_maps_k.recLocations(3).location_address := 'suzano, sp';    
  cco_google_maps_k.recLocations(4).location_address := 'atibaia, sp';      
  cco_google_maps_k.recLocations(5).location_address := 'osasco, sp';        
  cco_google_maps_k.recLocations(6).location_address := 'alphaville, sp';          
  cco_google_maps_k.recLocations(6).location_icon := 'http://www.google.com/mapfiles/markerP.png';  

  --Routes
  cco_google_maps_k.recOptions.DirectionsTravelMode := 'BICYCLING';
  cco_google_maps_k.recRoutes.location_address_start := 'suzano, sp';
  cco_google_maps_k.recRoutes.location_address_end   := 'sao paulo, sp';  

  result := cco_google_maps_k.initialize_f;
  htp.p(result);  

end;

Foram criados seis diferentes pontos de localização no mapa, com as cidades de Santos, Guarulhos, Suzano, Atibaia, Osasco e Alphaville; todas em São Paulo. Foi traçada uma rota entre Suzano e São Paulo andando de bicicleta.

Veja no exemplo acima, que foi utilizado apenas comandos PL/SQL para chamar a API construída. Primeiramente, foram populadas as variáveis citadas anteriormente com as configurações desejadas para a criação do mapa, depois foi chamada a função responsável por gerar o javascript “cco_google_maps_k.initialize_f”, e por fim, utilizado o procedimento “htp.p”, nativo da Oracle, responsável por enviar as informações de publicação para o servidor de aplicação.

Criando uma tela para traçar uma rota no APEX

Agora vamos criar uma tela com a funcionalidade de traçar rotas entre dois endereços.

Primeiro passo, compile a package utilizando o SQL Workshop:

Depois crie os seguintes itens na página conforme abaixo:

 

• P3_ENDERECO_ORIGEM – Endereço origem da rota;
• P3_ENDERECO_DESTINO – Endereço destino da rota;
• P3_TIPO_MAPA – Tipo de exibição do mapa. Pode ser utilizado “Hibrido”,”Rodovia”,”Satelite” e ”Terra”;
• P3_TRAVEL_MODE – Modo de viagem da rota. Pode ser utilizado “Bicicleta”, ”Carro”, e ”Andando”;
• P3_EXIBIR – Botão para submeter as informações para o servidor de aplicação.

Por fim, basta criar uma região do tipo “Conteúdo PL/SQL” em sua página e colocar o código abaixo nela. Neste tipo de região é permitido executar comandos PL/SQL durante o processo de renderização da página; desta forma, pode-se gerar HTML, Javascript e CSS dinamicamente.

declare
result clob;

begin
  -- Call the function
  cco_google_maps_k.recOptions.divHeight := 500;
  cco_google_maps_k.recOptions.divWidth  := 760;  
  cco_google_maps_k.recOptions.Zoom      := 'auto';

  --Routes
  cco_google_maps_k.recOptions.mapType               := v('P3_TIPO_MAPA');
  cco_google_maps_k.recOptions.DirectionsTravelMode  := v('P3_TRAVEL_MODE');
  cco_google_maps_k.recRoutes.location_address_start := v('P3_ENDERECO_ORIGEM');
  cco_google_maps_k.recRoutes.location_address_end   := v('P3_ENDERECO_DESTINO');

  result := cco_google_maps_k.initialize_f;
  htp.p(result);  

end;

Esse tipo de região torna o Oracle APEX muito poderoso, pois além dos recursos padrão do APEX, como Relatórios, Formulários, Menus, Gráficos etc, permite desenvolver qualquer tipo de recurso ou funcionalidade própria. Por exemplo, um gráfico customizado de Gantt, um Canvas para assinatura do funcionário etc.

Veja abaixo como ficou a tela:

A versão do package disponível para download tem a finalidade de exemplificação e estudo, logo possui algumas funcionalidades limitadas. Clique para baixar o arquivo da package: cco_google_maps_k

Outras funcionalidades para essa API estão sendo desenvolvidas, como por exemplo:

• Criar marcações de círculos no mapa com base nas coordenadas de latitude e longitude passadas através de parâmetros;
• Criar marcações de polígonos com a quantidade ilimitada de vértices com base nas coordenas de latitude e longitude passadas através de parâmetros;
• Utilização do webservice do Google para obter as coordenadas de um endereço.

Pessoal, espero que tenham gostado! Nesse artigo vimos como utilizar a API CCO_GOOGLE_MAPS_K criada para facilitar a utilização dos recursos do Google Maps no Oracle APEX.

Para acessar aplicação demo da nossa série de artigos utilize o seguinte link.

• Usuário: DEMO
• Senha: imasters