Como pesquisar por um endereço com o Google API

Tutoriais
,
1

Visão Geral

Neste tópico, vamos aprender a integrar a API do Google Maps para realizar buscas de endereços. Para isso, criaremos um formulário simples que exibirá um mapa com o endereço pesquisado e as últimas coordenadas buscadas.

Tu poderás conferir um exemplo funcional deste formulário em: demo

Requisitos

Para seguir este guia, você precisará de:

  • Uma API Key válida da Google API.

Configurando o formulário

Variáveis

Nome Tipo Descrição
apikey Texto Sua chave da API do Google Maps para autenticação.

Campos

Nome Tipo Descrição
btnSearch Botão Botão para iniciar a busca do endereço.
elmMap HTMLElement Elemento HTML onde o mapa será exibido.
txtCurrentCoords TextBox Campo de texto para exibir as coordenadas da localização encontrada.
txtSearch TextBox Campo de texto onde o usuário digitará o endereço a ser pesquisado.

Eventos

  • btnSearch_Click:
    Este evento conterá o procedimento:

    • Executar código Javascript: chamará a função JavaScript que realiza a busca do endereço.

  • Form_Load:
    Este evento conterá dois procedimentos:

    • Criar Record: Essa record conterá a apikey gravada em uma tabela do banco. Abaixo um exemplo de query:
    SELECT 'ADICIONE_SUA_APIKEY_AQUI' as apikey
    • Popular campo e variáveis: Popular a variável apikey com o valor da record.

  • txtSearch_LostFocus:
    Esse evento conterá somente uma chamada de procedimento para o btnSearch_Click.

Layout

Tipo de layout: Mobile
Dimensões: 320x568px

Adicionando arquivo Javascript

Por fim, adicionaremos um arquivo javascript no formulário. Com o seguinte conteúdo:

const myForm = (function () {

    // Adiciona Callbacks no Formulário
    latromi.formManager.setOnFormCreatedCallback(onFormCreated);
    latromi.formManager.setOnEventFiringCallback(onEventFiring);
    latromi.formManager.setOnFieldValueChangedCallback(onFieldValueChanged);

    var geocoder;
    var map;
    var marker;

    // Ocorre logo após o form ser inicializado
    function onFormCreated(ev) {
        var apiKey = ev.form.getVariableValue('apikey');
        latromi.extensions.loadScripts(['https://maps.googleapis.com/maps/api/js?libraries=places&key=' + apiKey], initMap);
    }

    // Ocorre quando um evento é disparado no Form
    function onEventFiring(ev) { }

    // Ocorre quando o valor de um campo é alterado no Form
    function onFieldValueChanged(ev) { }

    function initMap() {
        map = new google.maps.Map(document.getElementById("map"), {
            zoom: 8,
            center: { lat: 0.0, lng: 0.0 }
        });

        geocoder = new google.maps.Geocoder();
        marker = new google.maps.Marker({ map });
    }

    function SearchByPlace(place) {
        marker.setMap(null);

        geocoder
            .geocode({ address: place })
            .then((result) => {
                const { results } = result;

                map.setCenter(results[0].geometry.location);
                marker.setPosition(results[0].geometry.location);
                marker.setMap(map);

                latromi.formManager.getFormInstance().setFieldValue('txtCurrentCoords', results[0].geometry.location);
            })
            .catch((e) => {
                alert("Geocode was not successful for the following reason: " + e);
            });
    }

    // Todas as funções acima são "privadas", e não podem ser chamadas externamente.
    // As únicas funções que podem ser chamadas externamente são as que compões o resultado a seguir:
    return {
        SearchByPlace: function() {
            var place = latromi.formManager.getFormInstance().getFieldValue('txtSearch');
            
            SearchByPlace(place);
        }
    }
})();
3 curtidas