Single waypoint working, Multiple waypoints not, any ideas? - google-maps

Question

This code was written for me and used to work, but now the multiple waypoints are not working.
The waypoints are stored as |51.105166,-1.695971|51.105166,-1.695971| in the database.
With only 1 waypoint the maps work, but with more than one they do not show up at all.
Does anybody have any suggestions?
It can be viewed at the link here.
http://www.ridersguide.co.uk/2012/Ride_234
var directionDisplay;
var geocoder;
var directionsService = new google.maps.DirectionsService();
var latlng = new google.maps.LatLng(54.559322587438636, -4.1748046875);
function load() {
geocoder = new google.maps.Geocoder();
directionsDisplay = new google.maps.DirectionsRenderer();
var myOptions = {
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: latlng,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP_RIGHT
},
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.ZOOM_PAN,
position: google.maps.ControlPosition.TOP_LEFT}
};
var map = new google.maps.Map(document.getElementById('map'), myOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directionsPanel"));
var directionRendererOptions ={
suppressMarkers: true,
polylineOptions:{
strokeColor: "#FF0000",
strokeOpacity: 1,
strokeWeight: 3
}
};
directionsDisplay.setOptions(directionRendererOptions);
var start = '<?php echo $start; ?>';
var end = '<?php echo $end; ?>';
<?php
if($via != null){
echo "var points = [";
foreach($via as $point){
if($point != ""){
echo "{location:";
echo " '".$point."'";
echo "}";
}
}
echo "];\n";
}
?>
var request = {
origin:start,
waypoints: points,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
geocoder.geocode( { 'address': start}, function(results, status) {
var routeStart = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
icon: './images/motorcycling.png',
shadow: './images/motorcycling.shadow.png'
});
});
geocoder.geocode( { 'address': end}, function(results, status) {
var routeEnd = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
icon: './images/motorcyclingend.png',
shadow: './images/motorcycling.shadow.png'
});
});
<?php`

Answer 1

It appears there's a comma missing in your array.
var points = [{location: '51.105166,-1.695971'}{location: '51.105166,-1.695971'}];
should be
var points = [{location: '51.105166,-1.695971'},{location: '51.105166,-1.695971'}];
One way of doing that is to construct that string entirely in php rather than output it piecemeal, and then remove the initial comma you don't need. I've edited this code following the comments received, so just the locations between the [ ] are constructed and the comma removed:
<?php
if($via != null){
$pointstring='';
foreach($via as $point){
if($point != ""){
$pointstring.= ",{location:";
$pointstring.= " '".$point."'";
$pointstring.= "}";
}
}
echo "var points = [".substr($pointstring,1)."];\n";
}
?>
(Code not tested)
There are other ways of outputting the locations piecemeal as you had, but the requirement to have commas between them and not at the end makes it more complex than simply removing one you don't need.