google maps: arrows on polylines from selectbox?

[lucas vidgen]

Hi,

I'm trying to write a function that will show arrowheads on polylines selected from a select box in a google map. I only want the arrowheads that belong to the line shown to be displayed.

I have got it working using check boxes, and the select box shows the lines, but am having trouble tweaking the code to get the arrows to show up as well. You can see the working checkboxes (and the semi-working selectbox) here: http://www.xelawho.com/map/zonesarrowstest.htm

Below are (what I think are) the relevant bits of code. Thanks in advance for any help.

(cross-posted on the google maps forum, here and here over the last week, but unanswered)

var h = 0;
 var v = 0;
 
// === Function to create a marker arrow ===
      function createArrow(point,icon,category) {
        var arrows = new GMarker(point,icon);
        map.addOverlay(arrows);
        pts[v] = arrows;
        arrows.hide(); 
        arrows.mycategory = category;                                 
        pts.push(arrows);
        }
 
var select_html = '<select onChange="handleSelected2(this)">' + "selclick(this)" +
                        '<option selected> - Select a bus route - <\/option>';
 
 
      function showsel(category) {
        for (var v=0; v<pts.length-1; v++) {
         if (pts[v].mycategory == category) {
            pts[v].show();
          }
        }
 
      }
 
      function hidesel(category) {
      for (var v=0; v<pts.length-1; v++) {
         if (pts[v].mycategory == category) {
            pts[v].hide();
          }
        }
}
 
     function selclick(option,category) {
        if (option.onclick) {
          showsel(category);
        } else {
          hidesel(category);
        }
        }                    
 
                         function handleSelected2(opt,category) {     
  for (var h = 0; h <gpolylines.length; h++) {
          gpolylines[h].hide();
        }
        var h = opt.selectedIndex - 1; 
        if (h > -1) {
          gpolylines[h].show();
          }
          for (var v=0; v<pts.length; v++) {
 
               selclick(category);         
               }
 
}    
 
GDownloadUrl("allzonesencoded.xml", function(doc) {
        var xmlDoc = GXml.parse(doc);
 
var lines = xmlDoc.documentElement.getElementsByTagName("line");
 
for (var i=0; i< pts.length; i++) {
        var category = lines[a].getAttribute("category");
        }
 
// ===== final part of the select box =====
        select_html += '<\/select>' ;
        document.getElementById("selection2").innerHTML = select_html;