Google Map Route: Single origin with multiple destinations

Is there any way or functions in Google map that allows you to have a single origin with multiple directions?

e.g.

A --> B
A --> C
A --> D

EDIT: (for confused-demon)

e.g

    --> B          
 A |--> C
    --> D

So far what I did was this, using waypoints:

A --> B --> A --> C --> A --> D

But the problem with that solution is that, every destination goes back to the origin.(B to A, C to A)

What I want is origin "to destinations only" without showing routes of the destination going back to the origin just to go to the next destination like the first example.

Thanks.

Update: I have found this one(distance matrix) , but the problem with distance matrix is it does not return detailed route information like the DirectionsService, which is what I need.

Upvotes: 2

Answers (2)

Murali Krishna

Reputation: 171

I think this should be possible. I am not sure if this is the correct way but for me following way worked

location=[
        { b.lat: <lat of b> , b.lng: <lng of b> },
        { c.lat: <lat of c> , c.lng: <lng of c> },
        { d.lat: <lat of d> , d.lng: <lng of d> },
    ]
    location.forEach(function(value){
        var directionsService = new google.maps.DirectionsService();
        var directionsDisplay = new google.maps.DirectionsRenderer();
        directionsDisplay.setMap(map);
        var request = {
            origin: new google.maps.LatLng(<lat of a>, <lng of a>),
            destination: new google.maps.LatLng(value.lat,value.lng),
            travelMode: "DRIVING",
        };
        directionsService.route(request, function(response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);  
            }
        });
    });

Note: I have noticed when declaration of directionsService and directionsDisplay along with directionsDisplay.setMap(map) when moved outside loop render doesn't work, but rater ends up over-writing the existing render. Thus only one will be visible.

Upvotes: 0

duncan

Reputation: 31912

I don't think it's possible to get multiple directions rendered at the same time. I built something like this, where I only showed one directions at a time, but when the user clicked on the different destinations in the table, I updated the directions each time.

<!DOCTYPE html>
<html>
<head>
<title>Driving directions between markers</title>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=geometry"></script>

<script>
    var directionsService = new google.maps.DirectionsService();
    var directionsDisplay;
    var arrLatLon = [];
    var homeLatlng;
    var destinationID;

    function initialize() {
        homeLatlng = new google.maps.LatLng(54.42838,-2.9623);

        var myOptions = {
            zoom: 10,
            center: homeLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        var infowindow = new google.maps.InfoWindow({
            content: ''
        });

        directionsDisplay = new google.maps.DirectionsRenderer({
            draggable: true,
            map: map, 
            markerOptions: {
                draggable: true
            },
            panel: document.getElementById("directionsPanel"),
            infoWindow: infowindow
        });

        arrLatLon[1] = new google.maps.LatLng(54.60039,-3.13632);
        arrLatLon[2] = new google.maps.LatLng(54.36897,-3.07561);
        arrLatLon[3] = new google.maps.LatLng(54.5003526,-3.0844116);
        arrLatLon[4] = new google.maps.LatLng(54.57723,-2.79748);

        google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
            computeTotalDistance(directionsDisplay.directions);
        });

        // only seems possible to display 1 directions at a time?
        calcRoute(1);
    }

    function calcRoute(id) {
        var selectedMode = document.getElementById("mode").value;
        var selectedUnits = document.getElementById("units").value;

        if(typeof(id) != "undefined"){
            destinationID = id;
        }

        var request = {
            origin:homeLatlng,
            destination:arrLatLon[destinationID],
            travelMode: google.maps.DirectionsTravelMode[selectedMode],
            unitSystem: google.maps.UnitSystem[selectedUnits]
        };

        directionsService.route(request, function(response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
            }
        });
    }

    function computeTotalDistance(result) {
        var total = 0;
        var myroute = result.routes[0];
        for (var i = 0; i < myroute.legs.length; i++) {
            total += myroute.legs[i].distance.value;
        }
        total = total / 1000;

        var selectedUnits = document.getElementById("units").value;

        if (selectedUnits == "IMPERIAL") {
            document.getElementById("total").innerHTML = (Math.round((total* 0.6214)*100)/100) + " miles";
        } else {
            document.getElementById("total").innerHTML = total + " kilometres";
        }
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
    <div id="map_canvas" style="float:left;width:70%;height:60%"></div>

    <div id="directionsPanel" style="float:right;width:30%;height:60%"></div>

    <p>Total Distance: <span id="total"></span></p>

    <h2>Use the map below to see destinations near Ambleside</h2>
    <h3>More destinations near Ambleside</h3>

    <table id="tableNeighbours" border="1">
        <tr>
            <th>Destination</th>
            <th colspan="2">Distance from Ambleside</th>
        </tr>

            <tr>
                <td><a href="#" onclick="calcRoute(1); return false;">Keswick</a></td>

                <td>22.2 kilometres</td>
                <td>13.8 miles</td>
            </tr>

            <tr>
                <td><a href="#" onclick="calcRoute(2); return false;">Coniston</a></td>
                <td> 9.9 kilometres</td>

                <td> 6.2 miles</td>
            </tr>

            <tr>
                <td><a href="#" onclick="calcRoute(3); return false;">Lake District</a></td>
                <td>11.3 kilometres</td>
                <td> 7.0 miles</td>

            </tr>

            <tr>
                <td><a href="#" onclick="calcRoute(4); return false;">Cumbria</a></td>
                <td>19.7 kilometres</td>
                <td>12.2 miles</td>
            </tr>

    </table>

    <div>
        <strong>Mode of Travel: </strong>
        <select id="mode" onchange="calcRoute()">
          <option value="DRIVING" selected="selected">Driving</option>
          <option value="WALKING">Walking</option>
        </select>
    </div>

    <div>
        <strong>Measurement units: </strong>
        <select id="units" onchange="calcRoute()">
          <option value="IMPERIAL" selected="selected">Miles</option>
          <option value="METRIC ">Kilometres</option>
        </select>
    </div>
</body>
</html>

Upvotes: 2

Google Map Route: Single origin with multiple destinations

Answers (2)

Related Questions