Image Removed

Precisamos chamar o evento que acabamos de criar ao iniciar a página, então vamos usar o próprio controle do mapa para realizar essa chamada. Basta seguir os passos da Figura 4.56.

Image RemovedImage Added

Figura 4.5 6 - Sequência para chamar um evento na inicialização do componente.

1. Selecionar o  componente do mapacomponente Mapa na área de edição;
2. Selecionar a aba de configuraçõesConfigurações;
3. Selecionar a aba Eventos;
4. Clique nos "..." no evento Ao Iniciar;
5. Clique nos "..." para selecionarmos o bloco que será chamado;
6. Selecione o a função Executar do bloco APIGoogleMaps;
7. Clique em Selecionar e em seguida em OK para concluir.

Testando o carregamento do mapa

Nesse momento o mapa já deverá ser exibido na tela. Salve os arquivos alterados e execute a aplicação (F9) ou Debug (F11) e execute o sistema. Após abrir a aplicação como mobile, informe login e senha "admin" e confirme para acessar a página home e visualizar o mapa, como na Figura 4.67.

Image RemovedImage Added

Figura 4.6 7 - Rodando a aplicação.

Adicionando auto completar e rota

Nesse momento iremos Iremos adicionar 2 campos de texto onde o usuário irá digitar o endereço de origem e de destino e um botão para executar a ação de exibir a rota no mapa. Enquanto o usuário digita o endereço, a aplicação irá sugerir endereços através do auto completar do campo.

Inserir campos com o auto completar

Em nossa tela, arraste 2 componentes visuais Entrada de texto e um Botão, altere seus rótulos para "Saída", "Destino" e "Rota" respectivamente. Para facilitar a identificação dos campos no momento da formos criar as funções em blocos (Figura 5).

Image RemovedImage Added

Figura 5 - Arrastando componentes

Criação dos blocos auto completar 

Criar blocos auto completar

De volta ao bloco de Programação do tipo cliente, iremos criar outra função dentro do arquivo de bloco de programação que criamos anteriormente.

Image AddedImage Removed

Figura 5.1 - Primeira parte do AutoCompletarSaida.

De volta ao bloco de Programação do lado cliente, vamos arrastar
1. Arraste o bloco Para (categoria Funções) para criar uma nova função dentro do arquivo "APIGoogleMaps" e renomeie a nova função para "AutoCompletarSaida";
2. Arraste o bloco
"
3. Criar o autocompletar
"
4.  (categoria Google Maps);
5. Selecione, no parâmetro Id do mapa, o id do componente Google Maps que inserimos na view;
6. No parâmetro Id do input, o id do componente texto de saída;
7. No parâmetro Tipo de busca modifique para Endereço, forçando o auto completar retornar somente endereços. Precisaremos criar uma variável de escopo para podermos usar o retorno desse bloco na renderização da rota que iremos criar logo mais;
Adiantaremos essa etapa arrastando
8. Usaremos uma variável de escopo para alimentar a função que vai gerar a rota, assim, arraste o bloco Cria variável de escopo (categoria Formulário), inserindo "saida" no parâmetro Nome e arrastando o bloco "Item" (categoria Variáveis) para encaixar no parâmetro Valor
, veja o exemplo na
9. .

O AutocompletarSaida já está funcionando. Porém, quando um usuário começar a digitar um endereço irá aparecer os endereços mais relevantes do mundo inteiro. Podemos melhorar isso restringindo uma área no mapa (Figura 5.2) onde só aparecerão os endereços contidos dentro daquela região.

Image RemovedImage Added

Figura 5.2 - Os endereços que aparecerão no auto completar ficarão restritos a essa região da grande Salvador.

Restringindo área do auto completar - Saida

ficarão restritos a essa região da grande Salvador.

Restringindo área do auto completar - Saída

Ainda na função "AutoCompletarSaida", siga os passos abaixo para limitar a região de pesquisa.

Image AddedImage Removed

Figura 5.3 - Aparência final da função AutoCompletarSaida.

1. Arraste os blocos Pontos do retângulo (categoria Google Maps) para encaixar no parâmetro Limite de busca;
2. Arraste os blocos Criar
coordenada 
3. coordenada (categoria Google Maps), passando as coordenadas. Oeste-Sul e Leste-Norte de um retângulo. Nesse exemplo iremos utilizar a área da região informada na Figura 5.2;
4. Finalizaremos esse bloco alterando o parâmetro Busca restrita? para Verdadeiro, limitando a consulta à região que informamos. O bloco deve ficar como na Figura 5.3.

Restringindo área do auto completar - Destino

Auto completar do campo Destino será semelhante, então iremos criar uma nova função e copiar o que fizemos na função do campo saída.

Image RemovedImage Added

Figura 5.4 - Aparência final da função AutoCompletarDestino. 

1. Arrastaremos novamente o bloco Para (seção Funções), criando uma nova função dentro do arquivo "APIGoogleMaps" e renomearemos a nova função para "AutoCompletarDestino";

2. Copiaremos o bloco

 

3. Criar o autocompletar e colaremos na nova função AutoCompletarDestino; 

4. Alteraremos os parâmetros Id do mapa
 do bloco 
5. do bloco Criar o
autocompletar para
6. autocompletar para o id do componente Google Maps;
7. Alteraremos o parâmetro Id do Input o id do componente de texto referente ao destino;
8. Colocaremos o parâmetro Nome do bloco
 Criar
9. Cria variável de escopo para "destino", e por fim, colocaremos a variável item no parâmetro 
Valor.
10. Valor.

Chamar as funções auto completar

Com as 2 funções do autocompletar criadas (saída e destino), voltamos à primeira função que criamos (Executar) e arrastaremos as funções que estão na categoria Funções para a área Comandos do bloco Inicializar mapa (Figura 5.5). Após isso, ao iniciar o mapa, as funções de auto completar dos campos saída e destino serão chamadas.

Image RemovedImage Added

Figura 5.5 - Chamada das funções de auto completar no momento da criação do mapa.

Criando a Rota

Criaremos uma nova função chamada "GeraRota" que irá receber os pontos de origem e destino, calcular e renderizar a melhor rota no mapa.

Inicialmente vamos criar 2 variáveis que receberão o conteúdo do autocompletar. Usaremos os blocos definir (categoria Variáveis) e "Obtém variável de escopo" (categoria Formulário), informando o nome das variáveivariáveis, em nosso exemplo iremos dar os nomes de "destino" e "saida", mas é importante que as variáveis estejam iguais ao da função do auto completar.(Figura 5.6).Image Removed

Image Added

Figura 5.6 - Iniciando a função que exibe a rota no mapa. 

Após essa etapa, vamos seguir os passos da Figura 5.7.

Image AddedImage Removed

Figura 5.7 - Bloco GeraRota finalizado.

1. Vamos precisar do
bloco:
2. bloco Direção da rota (categoria Google Maps), que calculará o melhor caminho;
3. Em seguida, ele irá receber o bloco Criar rota (categoria Google Maps), para gerar a requisição;
4. Colocaremos no Criar
rota 
5. rota, o bloco Criar
coordenada 
6. coordenada (categoria Google Maps), que gera a coordenada baseada nos pontos de latitude e longitude;
Que irá receber os dados por meio do
7. Usaremos o bloco Obter propriedade do autocompletar (categoria Google Maps) responsável por coletar os pontos de latitude e longitude dos endereços passados pelo usuário utilizando as variáveis que criamos;
8. Finalizamos essa função com o bloco Desenha rota (categoria Google Maps), que receberá o Identificador do mapa, o retorno do caminho do bloco Direção da rota e uma propriedade. Este último bloco renderizará a rota por cima do mapa;

9. Em Opção avançada do

bloco 

10. bloco Desenha rota, adicionaremos uma propriedade que altera o zoom e centraliza o mapa para melhor visualização da rota. A opção deverá ser passada em formato JSON, informado a seguir:

    Bloco de código
    language js firstline 1 title Opções avançadas do bloco Desenhar rota linenumbers true
    {"preserveViewport": false}

Ao final, o nosso bloco deverá estar como na Figura 5.7.

Teste

Salve os arquivos alterados e execute a aplicação (F9) ou Debug (F11). Após abrir a aplicação, informe login e senha "admin" e confirme para acessar a página home e  e visualizar o mapa, informe endereços dentro da cidade de salvador, pois restringimos a busca nessa área. Nesse momento, o Auto completar deve estar funcionando e exibindo endereços com nomes parecidos, a exemplo da Figura 5.8.

Image RemovedImage Added

Figura 5.8 - Resultado final da nossa aplicação.

Após o preenchimento dos endereços, clicamos no botão "Rota" e o caminho deve ser renderizado no mapa como na Figura 5.9.

Image RemovedImage Added

Figura 5.9 - Resultado final da nossa aplicação.

Outras funcionalidades

A API do Google Maps possui uma série de funcionalidades interessantes. Apesar de não fazer parte do escopo inicial do tutorial, vamos mostrar como inserir um marcador e desenhar um polígono no mapa.

Bloco marcador

É possível adicionar uma imagem como marcador em um local no mapa, destacando-o, . Para isso, vamos seguir os passos da Figura 6.

Image RemovedImage Added

Figura 6 - Função Criar marcador

1. Criaremos uma nova função chamada "Adicionar Marcador";
2. Arrastaremos o bloco Criar marcador (categoria Google Maps);
3. Arraste também o bloco Criar coordenada (categoria Google Maps) onde passaremos a longitude e latitude desse ponto;
4. No bloco Criar marcador devemos passar alguns dados, começaremos selecionando no parâmetro Id do mapa o id do componente Google Maps que usamos na view;
5. No parâmetro Id do marcador escreveremos o Identificador do marcador (nesse exemplo: cronappId);
6. O parâmetro Título que exibirá um tooltip quando o ponteiro do mouse passar por cima, receberá o texto "Sede Cronapp";
7. Em ícone devemos informar o endereço da imagem;
8. Em Janela de informações podemos adicionar um texto com informações do local, inclusive usando HTML e CSS. O bloco ficará como na Figura 6. 

<h2 style="text-align: center;">Sede do Cronapp</h2>

Desenhar um polígono no mapa

É possível desenhar polígonos em cima do mapa para destacar uma região. Nesse exemplo iremos adicionar um círculo.

 Usaremos Usaremos o bloco Desenha círculo (categoria Google Maps). Como parâmetro, informe o Id do mapa e do círculo que estamos criando (nesse exemplo: IdCirculo), o ponto central do círculo, o tamanho do raio em metros, a cor do interior do círculo, cor do seu contorno e a transparência do preenchimento interior que varia entre 0 e 1 (Figura 6.1). 

Image RemovedImage Added

Figura 6.1 - Função Desenha Círculo

Chamada das funções

Arraste os blocos das funções recém-criadas que estão na categoria Funções para a lista de comandos do bloco Inicializar mapa da função principal, como fizemos anteriormente (Figura 6.2).

Image RemovedImage Added

Figura 6.2 - Chamando as funções Criar marcador e Desenha Círculo

Resultado final

Ao rodarmos nossa aplicação, visualizaremos o marcador que criamos (Figura 6.3).

Image RemovedImage Added

Figura 6.3 - Marcador com sua janela de informações mais tooltip e o círculo criado em volta do ponto informado