How to add multiple (separated with a plus symbol) waypoints to a map

Question

Thanks to geocodezip , I have managed to create a map with directions functionality and XML markers loaded. There is a problem left though:

How can I add waypoints to it? They should be separated by plus symbol or something else appropriate.

Here is the current code:

<script type="text/javascript"> 
//<![CDATA[
 // global "map" variable
var map = null;
var rendererOptions = {
draggable: true
};
var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);;
var directionsService = new google.maps.DirectionsService();
// A function to create the marker and set up the event window function 
function createMarker(latlng, name, html) {
var marker = new google.maps.Marker({
position: latlng,
map: map,
zIndex: Math.round(latlng.lat()*-100000)<<5
});
var contentString = html;
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString); 
infowindow.open(map,marker);
});
}
// ===== request the directions =====
function getDirections() {
// ==== Set up the walk and avoid highways options ====
var request = {};
if (document.getElementById("walk").checked) {
request.travelMode = google.maps.DirectionsTravelMode.WALKING;
} else {
request.travelMode = google.maps.DirectionsTravelMode.DRIVING;
}
if (document.getElementById("highways").checked) {
request.avoidHighways = true;
}   
if (document.getElementById("alternatives").checked) {
request.provideRouteAlternatives = true;
}   
// ==== set the start and end locations ====
var saddr = document.getElementById("saddr").value
var daddr = document.getElementById("daddr").value
request.origin = saddr;
request.destination = daddr;
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
function initialize() {
// create the map
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(43.907787,-79.359741),
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directionsPanel"));
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
// Read the data from example.xml   
if (document.getElementById("showmarkers").checked) {
downloadUrl("example.xml", function(doc) {
var xmlDoc = xmlParse(doc);
var markers = xmlDoc.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i].getAttribute("lat"));
var lng = parseFloat(markers[i].getAttribute("lng"));
var point = new google.maps.LatLng(lat,lng);
var html = markers[i].getAttribute("html");
var label = markers[i].getAttribute("label");
// create the marker
var marker = createMarker(point,label,html);
}
});
}
// Read the data from example2.xml   
if (document.getElementById("showmarkers2").checked) {
downloadUrl("example2.xml", function(doc) {
var xmlDoc = xmlParse(doc);
var markers = xmlDoc.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i].getAttribute("lat"));
var lng = parseFloat(markers[i].getAttribute("lng"));
var point = new google.maps.LatLng(lat,lng);
var html = markers[i].getAttribute("html");
var label = markers[i].getAttribute("label");
// create the marker
var marker = createMarker(point,label,html);
}
});
}
}
var infowindow = new google.maps.InfoWindow(
{ 
size: new google.maps.Size(150,50)
});  
//]]>
</script>

This is the code I have used to generate waypoints, but it's not working now:

var via = document.getElementById("via").value;
  if (via) {
      so = via.split("+")
      if (so.length > 1) {
          var wpArray = [];
          for (i=0; (i<so.length); i++) {
            wpArray.push({location: so[i], stopover:true})
          }
          request = {
            origin:saddr, 
            destination:daddr,
            waypoints: wpArray,
            provideRouteAlternatives: true,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
          }
      } else {
          request = {
            origin:saddr, 
            destination:daddr,
            waypoints:[{location:via, stopover:true}],
            provideRouteAlternatives: true,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
          }
      }
  } else {
      request = {
        origin:saddr, 
        destination:daddr,
        provideRouteAlternatives: true,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
      }
  }

EDIT This is the working function:

function getDirections() {
        // ==== Set up the walk and avoid highways options ====
        var request = {};
        if (document.getElementById("walk").checked) {
           request.travelMode = google.maps.DirectionsTravelMode.WALKING;
        } else {
          request.travelMode = google.maps.DirectionsTravelMode.DRIVING;
        }

        if (document.getElementById("highways").checked) {
           request.avoidHighways = true;
        }

        if (document.getElementById("alternatives").checked) {
           request.provideRouteAlternatives = true;
        }


        // ==== set the start and end locations ====
        var start = document.getElementById("start").value
        var end = document.getElementById("end").value

        request.origin = start;
        request.destination = end;
        request.waypoints = via;

var so;
var via = document.getElementById("via").value;



if (via) {
      so = via.split("+")
      if (so.length > 1) {
          var wpArray = [];
          for (i=0; (i<so.length); i++) {
            wpArray.push({location: so[i], stopover:false})
          }
          request = {
            origin:start, 
            destination:end,
            waypoints: wpArray,
            provideRouteAlternatives: true,
            avoidHighways: document.getElementById("highways").checked,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
          }
      } else {
          request = {
            origin:start, 
            destination:end,
            waypoints:[{location:via, stopover:false}],
            provideRouteAlternatives: true,
            avoidHighways: document.getElementById("highways").checked,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
          }
      }
  } else {
      request = {
        origin:start, 
        destination:end,
        provideRouteAlternatives: true,
        avoidHighways: document.getElementById("highways").checked,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
      }
  }

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

Answer 1

Not sure why you have 2 xml files or what their format is. Here is an example which shows/hides markers based on their categories (again translated from Mike Williams' v2 tutorial):

http://www.geocodezip.com/v3_MW_example_categories.html

(also copied to How to show/hide markers from XML file without refreshing the page with the part of the question it applied to)