get points on route in google maps api v3

Im working on Symfony and try with google map api v3. I can view the route information between two points with the code below. I need to send each point on the route to a form under the route information. How can I do this?

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
    </style>
    </head>
    <body>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js? 
    key=YOUR_API_KEY&sensor=false&libraries=places"></script>

This is my using javascript

<script type="text/javascript">
    var source, destination;
    var directionsDisplay;
    var directionsService = new google.maps.DirectionsService();
    google.maps.event.addDomListener(window, 'load', function () {
        new google.maps.places.SearchBox(document.getElementById('txtSource'));
        new google.maps.places.SearchBox(document.getElementById('txtDestination'));
        directionsDisplay = new google.maps.DirectionsRenderer({ 'draggable': true });
    });

    function GetRoute() {
        var karabuk= new google.maps.LatLng(41.20488, 32.62768);

        var mapOptions = {
            zoom: 11,
            center: karabuk
        };
        map = new google.maps.Map(document.getElementById('dvMap'), mapOptions);
        directionsDisplay.setMap(map);
        directionsDisplay.setPanel(document.getElementById('dvPanel'));

        //*********DIRECTIONS AND ROUTE**********************//
        source = {lat:41.206373, lng:32.659379};
        destination = document.getElementById("txtDestination").value;

        var request = {
            origin: source,
            destination: destination,
            travelMode: google.maps.TravelMode.DRIVING
        };
        directionsService.route(request, function (response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
               // console.log(response);
            }
        });

        //*********DISTANCE AND DURATION**********************//
        var service = new google.maps.DistanceMatrixService();
        service.getDistanceMatrix({
            origins: [source],
            destinations: [destination],
            travelMode: google.maps.TravelMode.DRIVING,
            unitSystem: google.maps.UnitSystem.METRIC,
            avoidHighways: false,
            avoidTolls: false
        }, function (response, status) {
            if (status == google.maps.DistanceMatrixStatus.OK && response.rows[0].elements[0].status != 
            "ZERO_RESULTS") {
                var distance = response.rows[0].elements[0].distance.text;
                var duration = response.rows[0].elements[0].duration.text;
                var dvDistance = document.getElementById("dvDistance");
                dvDistance.innerHTML = "";
                dvDistance.innerHTML += "Distance: " + distance + "<br />";
                dvDistance.innerHTML += "Duration:" + duration;

            } else {
                alert("Unable to find the distance via road.");
            }
        });
    }
    </script>

Table for input endpoint

<table border="0" cellpadding="0" cellspacing="3">
    <tr>
        <td colspan="2">

            &nbsp; Destination:
            <input type="text" id="txtDestination" value="Enter the end point lat,lng information" 
     style="width: 200px" />
            <br />
            <input type="button" value="Get Route" onclick="GetRoute()" />
            <hr />
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <div id="dvDistance">
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <div id="dvMap" style="width: 500px; height: 500px">
            </div>
        </td>
        <td>
            <div id="dvPanel" style="width: 500px; height: 500px">
            </div>
        </td>
    </tr>
    </table>
   <br />
   </body>
   </html>

It looks like this. How can I get each point on this route?

Source: Symfony Questions

Was this helpful?

0 / 0

Leave a Reply 0

Your email address will not be published. Required fields are marked *