[Anderson Paraibano]

Resumo:
Neste artigo, exploraremos como exibir a resposta da API da matriz de distância do Google na célula da grade por linha, utilizando jQuery e chamadas assíncronas. A API da matriz de distância do Google fornece informações úteis sobre a distância e o tempo de viagem entre locais específicos. Vamos aprender como realizar uma chamada assíncrona para a API e atualizar a célula correspondente na grade com a resposta recebida.

Introdução:
A matriz de distância do Google é uma poderosa API que permite obter informações sobre a distância e o tempo de viagem entre diferentes locais. Ao fazer uma solicitação à API, ela retorna uma resposta com dados detalhados. Neste artigo, abordaremos como exibir esses dados em uma célula específica de uma grade usando jQuery e chamadas assíncronas.

Configuração do projeto:
Antes de começar, certifique-se de ter uma chave de API válida da matriz de distância do Google. Isso permitirá que você faça solicitações à API e receba as respostas necessárias. Certifique-se também de ter jQuery incluído em seu projeto, pois iremos utilizá-lo para fazer chamadas assíncronas.

Passo 1: Estrutura HTML
Comece criando a estrutura básica do seu projeto HTML. Você precisará de uma grade (tabela) onde deseja exibir as respostas da API da matriz de distância do Google. Por exemplo:

html
Copy code
<table id=”distance-grid”>
<tr>
<th>Origem</th>
<th>Destino</th>
<th>Distância</th>
<th>Tempo de viagem</th>
</tr>
<tr>
<td>Origem 1</td>
<td>Destino 1</td>
<td class=”distance-cell”></td>
<td class=”travel-time-cell”></td>
</tr>
<!– adicione mais linhas conforme necessário –>
</table>
Passo 2: Script jQuery
Agora, vamos escrever um script jQuery para fazer chamadas assíncronas à API da matriz de distância do Google e atualizar as células correspondentes na grade.

javascript
Copy code
$(document).ready(function() {
var apiKey = ‘SUA_CHAVE_DE_API’;

// Percorra todas as linhas da grade, exceto a primeira (cabeçalho)
$(‘#distance-grid tr:not(:first)’).each(function() {
var origin = $(this).find(‘td:eq(0)’).text();
var destination = $(this).find(‘td:eq(1)’).text();
var distanceCell = $(this).find(‘.distance-cell’);
var travelTimeCell = $(this).find(‘.travel-time-cell’);

// Faça a chamada assíncrona para a API da matriz de distância do Google
$.ajax({
url: ‘https://maps.googleapis.com/maps/api/distancematrix/json&#8217;,
method: ‘GET’,
data: {
key: apiKey,
origins: origin,
destinations: destination,
units: ‘metric’
},
success: function(response) {
// Atualize as células com os dados da resposta da API
distanceCell.text(response.rows[0].elements[0].distance.text);
travelTimeCell.text(response.rows[0].elements[0].duration.text);
},
error: function() {
distanceCell.text(‘Erro ao obter a distância’);
travelTimeCell.text(‘Erro ao obter o tempo de viagem’);
}
});
});
});
Certifique-se de substituir ‘SUA_CHAVE_DE_API’ pela sua própria chave de API da matriz de distância do Google.

Explicação do código:

O código acima é acionado quando o documento HTML é carregado, usando o $(document).ready().
Ele percorre todas as linhas da grade, exceto a primeira (cabeçalho), usando $(‘#distance-grid tr:not(:first)’).each().
Para cada linha, ele obtém a origem, o destino e as células correspondentes onde os dados da API devem ser exibidos.
Em seguida, ele faz uma chamada assíncrona para a API da matriz de distância do Google usando $.ajax(), passando os parâmetros necessários, incluindo a chave de API.
Se a chamada for bem-sucedida, as células da distância e do tempo de viagem são atualizadas com os valores da resposta da API.
Se ocorrer um erro durante a chamada, as células serão atualizadas com mensagens de erro apropriadas.
Conclusão:
Neste artigo, exploramos como exibir a resposta da API da matriz de distância do Google em células específicas de uma grade por linha. Usando jQuery e chamadas assíncronas, pudemos obter os dados da API e atualizar dinamicamente as células correspondentes na página. Isso permite uma exibição eficiente e organizada das informações fornecidas pela API de matriz de distância do Google.

[Autor]

Posts