Does anyone have any direction for me to try to implement tolls (or api free / or not.) On a route from point A to point B?
My Index:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8" />
<title>Rota Calculada</title>
<link rel="stylesheet" type="text/css" href="css/estilo.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="img/rota_logo.png">
</head>
<body>
<div id="site">
<form method="post" action="index.html">
<fieldset>
<legend>Rota Calculada</legend>
<div>
<label for="txtEnderecoPartida">Endereço de partida:</label>
<input type="text" id="txtEnderecoPartida" name="txtEnderecoPartida" />
</div>
<div>
<label for="txtEnderecoChegada">Endereço de chegada:</label>
<input type="text" id="txtEnderecoChegada" name="txtEnderecoChegada" />
</div>
<div>
<input type="submit" class="btn-green" id="btnEnviar" name="btnEnviar" value="Traçar Rota" />
</div> <br>
<legend>Calcula Combustível</legend>
<div>
<label for="txtKm">Digite a Distancia (Km):</label>
<input id="txtKM" class="form-control" placeholder="Informe a kilômetragem informada" tabindex="10">
</div>
<div>
<label for="txtKmL">Consumo Km/L:</label>
<input id="txtKML" class="form-control" placeholder="Informe a quantidade média de Km/L que seu veículo costuma fazer" tabindex="10">
</div>
<div>
<label for="txtPreco">Preço:</label>
<input id="txtPL" placeholder="Informe o preço médio que você paga no seu combustivel" tabindex="11">
</div>
<div>
<input type="submit" class="btn-green" id="btnCalcular" onclick="calcular();" value="Calcular" />
<input type="reset" class="btn-green input2" name="btnEnviar" value="Limpar" />
<div id="Resultado"></div>
<div id="entrada"></div>
<div id="chegada"></div>
</div>
</fieldset>
</form>
<div>
<div id="mapa"></div>
</div>
<legend>Trajeto</legend><br><br>
<div id="trajeto-texto"></div>
</div>
<script src="js/jquery.min.js"></script>
<!-- Maps API Javascript -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAdZXpF2KipB5pRZdT44s9m2BAIJoucmLE&libraries=geometry,places&language=pt-BR&v=3.exp"></script><scriptlanguage="javascript">
function calcular(){
var litros = parseFloat(document.getElementById('txtKM').value) / parseFloat(document.getElementById('txtKML').value);
var valor = parseFloat(document.getElementById('txtPL').value) * litros;
document.getElementById('Resultado').innerHTML = "<br><b>Gasto total: R$ </b>" + valor;
var txtentrada = document.getElementById('txtEnderecoPartida').value;
document.getElementById('entrada').innerHTML = "<br><b>Endereço de Partida:</b><br>" + txtentrada;
var txtchegada = document.getElementById('txtEnderecoChegada').value;
document.getElementById('chegada').innerHTML = "<br><b>Endereço de Chegada:</b><br>" + txtchegada;
}
</script>
<!-- Arquivo de inicialização do mapa -->
<script src="js/mapa.js"></script>
</body>
</html>
My map.js
var map;
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var latlng = new google.maps.LatLng(-23.552210, -46.634512);
var autoCompleteInput = document.getElementById('txtEnderecoChegada');
var autoCompleteOpcoes = {types: ['geocode']};
autocomplete = new google.maps.places.Autocomplete(autoCompleteInput,autoCompleteOpcoes);
var autoCompleteInput2 = document.getElementById('txtEnderecoPartida');
var autoCompleteOpcoes2 = {types: ['geocode']};
autocomplete = new google.maps.places.Autocomplete(autoCompleteInput2,autoCompleteOpcoes2);
var options = {
zoom: 12,
center: latlng,
panControl: false,
scaleControl: true,
scrollwheel: true,
draggable: true,
overviewMapControl: false,
streetViewControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("mapa"), options);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("trajeto-texto"));
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
pontoPadrao = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
map.setCenter(pontoPadrao);
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
"location": new google.maps.LatLng(position.coords.latitude, position.coords.longitude)
},
function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
$("#txtEnderecoPartida").val(results[0].formatted_address);
}
});
});
}
}
initialize();
$("form").submit(function(event) {
event.preventDefault();
var enderecoPartida = $("#txtEnderecoPartida").val();
var enderecoChegada = $("#txtEnderecoChegada").val();
var request = {
origin: enderecoPartida,
destination: enderecoChegada,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});
});