Google Maps Waypoints not showing up - google-maps

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>

Answer 2

There isn't a great deal of information about how your Javascript relates to the page HTML. But this line
var checkboxArray = document.getElementsByName("waypoints[]");
should probably be
var checkboxArray = document.getElementsByName("waypoints");
assuming that all your checkboxes have the name waypoints.
What is inside the quotes should exactly match the name of the checkbox elements, so if each checkbox has the name waypoint (because each checkbox marks a single waypoint, this is a possibility) then you should use .getElementsByName("waypoint") to find all elements which have that name.