Mapping and getting mileage between two points

Question

Mapping and getting mileage between two points

Navigation

#1 by (7 votes)

6

I'm developing a web application, and I'm getting two addresses for a text field, and I'm using it to calculate the distance to the Matrix API from Google Maps, so beauty, but I also wanted to generate a map showing that path, and that this path was exactly the same as the Matrix API used to calculate the mileage. In short, I need to draw a path between two points, and get the mileage between it (to save in a variable). Give me only one north, that's all I need. Thank you.

php google-maps

asked by anonymous 09.07.2014 / 01:41

1 answer

When using input type="button" or input type="submit" Problem in converting number (NumberFormat)

score 7 · Accepted Answer

Using google maps API V3 , you can use this example, if you need only one north.

Javascript + Html

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Calcular distancia entre cidades (mapas e rotas)</title>
    <script src="http://code.jquery.com/jquery-1.8.1.js"type="text/javascript"></script>
</head>
<body>
    <!-- Parâmetro sensor é utilizado somente em dispositivos com GPS -->
    <script src="http://maps.google.com/maps/api/js?sensor=false"></script><scripttype="text/javascript">
        function CalculaDistancia() {
            $('#litResultado').html('Aguarde...');
            //Instanciar o DistanceMatrixService
            var service = new google.maps.DistanceMatrixService();
            //executar o DistanceMatrixService
            service.getDistanceMatrix(
              {
                  //Origem
                  origins: [$("#txtOrigem").val()],
                  //Destino
                  destinations: [$("#txtDestino").val()],
                  //Modo (DRIVING | WALKING | BICYCLING)
                  travelMode: google.maps.TravelMode.DRIVING,
                  //Sistema de medida (METRIC | IMPERIAL)
                  unitSystem: google.maps.UnitSystem.METRIC
                  //Vai chamar o callback
              }, callback);
        }
        //Tratar o retorno do DistanceMatrixService
        function callback(response, status) {
            //Verificar o Status
            if (status != google.maps.DistanceMatrixStatus.OK)
                //Se o status não for "OK"
                $('#litResultado').html(status);
            else {
                //Se o status for OK
                //Endereço de origem = response.originAddresses
                //Endereço de destino = response.destinationAddresses
                //Distância = response.rows[0].elements[0].distance.text
                //Duração = response.rows[0].elements[0].duration.text
                $('#litResultado').html("<strong>Origem</strong>: " + response.originAddresses +
                    "<br /><strong>Destino:</strong> " + response.destinationAddresses +
                    "<br /><strong>Distância</strong>: " + response.rows[0].elements[0].distance.text +
                    " <br /><strong>Duração</strong>: " + response.rows[0].elements[0].duration.text
                    );
                //Atualizar o mapa
                $("#map").attr("src", "https://maps.google.com/maps?saddr=" + response.originAddresses + "&daddr=" + response.destinationAddresses + "&output=embed");
            }
        }
    </script>
    <table width="100%" cellspacing="0" cellpadding="0" border="0">
        <tbody>
            <tr>
                <td>
                    <label for="txtOrigem"><strong>Endere&ccedil;o de origem</strong></label>
                    <input type="text" id="txtOrigem" class="field" style="width: 400px" />

                </td>
            </tr>
            <tr>
                <td>
                    <label for="txtDestino"><strong>Endere&ccedil;o de destino</strong></label>
                    <input type="text" style="width: 400px" class="field" id="txtDestino" />

                </td>
            </tr>
            <tr>
                <td>
                    <input type="button" value="Calcular dist&acirc;ncia" onclick="CalculaDistancia()" class="btnNew" />
                </td>
            </tr>
        </tbody>
    </table>
    <div><span id="litResultado">&nbsp;</span></div>
    <div style="padding: 10px 0 0; clear: both">
        <iframe width="750" scrolling="no" height="350" frameborder="0" id="map" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?saddr=sãopaulo&daddr=riodejaneiro&output=embed"></iframe>
    </div>

Return from Json

{ "destinationAddresses" : [ "Rio de Janeiro - RJ, República Federativa do Brasil" ],
       "originAddresses" : [ "São Paulo - SP, República Federativa do Brasil" ],
       "rows" : [ { "elements" : [ { "distance" : { "text" : "430 km",
              "value" : 430395
            },
          "duration" : { "text" : "4 horas 42 minutos",
              "value" : 16942
            },
          "status" : "OK"
        } ] } ]
}

I've already used this example for an application and it worked ... Just change what you need.

Source: link

If you have any questions, just talk, although it is well commented, you have some implementation details, note that the use of javascript objects is very strong in the API.

Another site with detailed explanations of the objects: link