Question

I am new to the Google Maps API and so far I have run into many issues.

I am trying to map waypoints from latlng coords determined by an array of checkboxes.

Here is my js file in full:

var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;


var waypts = [];
var start = new google.maps.LatLng(41.850033, -87.6500523);
var end = new google.maps.LatLng(40.850033, -87.6500523);

function initialize() 
{
    directionsDisplay = new google.maps.DirectionsRenderer();
    var myOptions = {
        zoom: 6,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: new google.maps.LatLng(41.850033, -87.6500523)
    }

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    directionsDisplay.setMap(map);

}

function calcRoute()
{
    var checkboxArray = document.getElementsByName("waypoints[]");


    for (var i = 0; i < checkboxArray.length; i++) 
    {
        if (checkboxArray[i].checked) 
        {
            var lat = parseFloat(checkboxArray[i].attributes["lat"].value);
            var lng = parseFloat(checkboxArray[i].attributes["lng"].value);

            waypts.push({
                location: new google.maps.LatLng(lat, lng),
                stopover: true
            });
        }
    }
}

var request = {
    origin: start, 
    destination: end,
    waypoints: waypts,
    optimizeWaypoints: true,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
};

directionsService.route(request, function(response, status) {
    console.log("mapping...");

    if(status == google.maps.DirectionsStatus.NOT_FOUND)
    {
        console.log("Could not one or more of locations");
    }
});

The map shows up and “mappings…” pops in the console when the page loads. When I press the calcRoute submit button nothing happens. I have logged the lat/long and the waypt object so I know they are getting to that point but it seems the route is never recalculated, etc.

I really just need a basic demo on this but the only one I have found is which I have used for almost everything but I get no results:
Google Example Directions Waypoints

Answer 1

Currently your script never will show any route, because you are missing the call of directionsDisplay.setDirections() to print the route.

You also should should put the call of directionsService.route() into the calcRoute-function.

fixed code:

<script type="text/javascript">
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

var start = new google.maps.LatLng(41.850033, -87.6500523);
var end = new google.maps.LatLng(40.850033, -87.6500523);

function initialize() 
{
    directionsDisplay = new google.maps.DirectionsRenderer();
    var myOptions = {
        zoom: 12,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: new google.maps.LatLng(41.850033, -87.6500523)
    }

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    directionsDisplay.setMap(map);

}

function calcRoute()
{
    var checkboxArray = document.getElementsByName("waypoints[]");
    var waypoints=[];

    for (var i = 0; i < checkboxArray.length; i++) 
    {
        if (checkboxArray[i].checked) 
        {
            var lat = parseFloat(checkboxArray[i].attributes["lat"].value);
            var lng = parseFloat(checkboxArray[i].attributes["lng"].value);

            waypts.push({
                location: new google.maps.LatLng(lat, lng),
                stopover: true
            });
        }
    }


var request = {
    origin: start, 
    destination: end,
    waypoints: waypts,
    optimizeWaypoints: true,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
};

directionsService.route(request, function(response, status) {
    if(status == google.maps.DirectionsStatus.OK)
    {
        //print the route
        directionsDisplay.setDirections(response);
    }
    else
    {
      console.log('something went wrong',status);
    }

});
}
</script>