GoogleMaps (Pedagio)

0


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);
        }
    });
});
    
asked by anonymous 14.03.2018 / 02:18

0 answers