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" 
    <html xmlns="">
    <style type="text/css">
            font-family: Arial;
            font-size: 10pt;
    <script type="text/javascript" src=" 

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);

        //*********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) {
               // console.log(response);

        //*********DISTANCE AND DURATION**********************//
        var service = new google.maps.DistanceMatrixService();
            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.");

Table for input endpoint

<table border="0" cellpadding="0" cellspacing="3">
        <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 colspan="2">
            <div id="dvDistance">
            <div id="dvMap" style="width: 500px; height: 500px">
            <div id="dvPanel" style="width: 500px; height: 500px">
   <br />

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 *