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.
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.
