Calcular preço de frete com o Google Distance Matrix Service

postado em: HTML, Javascript, JQuery | 2

Olá pessoal, esta semana estava procurando alguma forma fácil de calcular o frete pago para o motoboy fazer o delivery do restaurante que prestamos serviço, o Miranda Restaurante, Hamburgueria e Massas aqui de Curitiba.

Para fazer isso precisei criar uma conta no Google Cloud e ativei a API Distance Matrix Service para conseguir uma chave de acesso para browser.

Usei também o Bootstrap para o visual não ficar no HTML puro.

Calcular Frete Distance Matrix Service
Calcular Frete Distance Matrix Service

 

Para o script abaixo funcionar, basta criar uma pagina HTML e fazer um copy and paste. Vai ser necessário por a chave do google no lugar do YOUR_API_KEY.

Para calcular o valor do frete com a API Matrix, é necessário informar um endereço de origem e um de destino. No nosso caso, como o endereço de origem sempre será o mesmo, foi deixado fixo no formulário com input hidden. Mas se for preciso alterar a origem ou deixar livre para edição, basta mudar o input de hidden para text.

Para facilitar a vida de quem irá pesquisar o frete, coloquei no form o onsubmit=”getDistanceValue();” para que quando terminar de preencher o campo e apertar o ENTER já inicia a pesquisa.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<script src="http://code.jquery.com/jquery-1.8.1.js" type="text/javascript"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

@media (max-width: @screen-xs) {
    body{font-size: 14px;}
}

@media (max-width: @screen-sm) {
    body{font-size: 16px;}
}

h5{
    font-size: 1.2em;
} 

</style>
</head>
<body>
	<script type="text/javascript">
		function getDistanceValue() {
		//API gerada no Google 
		var origin = $("#origin").val();
		var destination = $("#destination").val() + ", Curitiba - PR, Brasil";
		var service = new google.maps.DistanceMatrixService;
        service.getDistanceMatrix({
          origins: [origin],
          destinations: [destination],
          travelMode: 'DRIVING',
          unitSystem: google.maps.UnitSystem.METRIC,
          avoidHighways: false,
          avoidTolls: false
        }, function(response, status) {
        	
        	if (status == "OK") {
        		
				//KM price
        		var pricePerKM = 1.6;
        		//meter to kilometer conversion
 				var distance = response.rows[0].elements[0].distance.value;
				var distanceKM = (distance/1000);
				var price = (Math.ceil(distanceKM) * pricePerKM).toFixed(2);		
				
				$('#litResultado').html(
						"<li class='list-group-item'><strong>Origem</strong>: " + response.originAddresses[0] + "</li>"
						+ "<li class='list-group-item'><strong>Destino</strong>: " + response.destinationAddresses[0] + "</li>"
						+ "<li class='list-group-item'><strong>Distância</strong>: " + response.rows[0].elements[0].distance.text + "</li>"
						+ "<li class='list-group-item'><strong>Duração</strong>: " + response.rows[0].elements[0].duration.text + "</li>"
						+ "<li class='list-group-item list-group-item-success'><strong>Preço</strong>: " + price + "</li>");
			} else {
				$('#litResultado').html('Ocorreu um erro');
			}   
        }
		);
			
		}
	</script>
	<div class="container-fluid">	
	<div class="card">
		<div class="card-header"><h5>Calcular Frete</h5></div>
		<div class="card-body">
		<p class="card-text">
		<form onsubmit="getDistanceValue(); return false;">
			<input type="hidden" id="origin" value="R. Prof. Ulisses Vieira, 824 - Vila Izabel, Curitiba - PR, 80320-090, Brasil" />
		  	<div class="form-group">
		  		<label for="destination">Destino</label>
		    	<input type="text" class="form-control" id="destination" placeholder="endereço">
		  	</div>
			<input type="button" value="Calcular distância" class="btn btn-primary" onclick="getDistanceValue()" />
		</form>
		</p>
		<ul class="list-group" id="litResultado">
		</ul>
		</div>
	</div>
	</div>
</body>
</html>

Caso tenha alguma dúvida deixe um comentário que terei prazer em ajudar.
Comentários são bem-vindos assim posso melhorar a qualidade dos tutoriais aqui apresentados.

Seguir Marcelo Korjenioski:

Desenvolvedor Web. Formado em Redes de Computadores na Faculdade Santa Cruz em Curitiba PR e Pós-Graduado em Tecnologia Java na UTFPR.