title: Map Markers Side Bar Not Updating SideBar Google Maps API V3
body: <p>The following code is working great.  It imports XML data from database, numbers and plots map markers, loads the sidebar.</p>
  
  <p>I'm filtering my results by featured category.  The function launches on clicking a radio button in the html. </p>
  
  <pre><code>&lt;input type="checkbox" id="featuredbox" onclick="boxclick(this,'featured')" /&gt;
  </code></pre>
  
  <p>This part works great. I toggle the radio button and the appropriate map markers are toggled on and off.</p>
  
  <p>My problem is that the sidebar doesn't update accordingly. I got this far working from the following example: <a href="http://www.geocodezip.com/v3_MW_example_categories.html" rel="nofollow">http://www.geocodezip.com/v3_MW_example_categories.html</a></p>
  
  <p>Here is all my code:</p>
  
  <pre><code>&lt;script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/gmap_markerwithlabel.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      //&lt;![CDATA[
  
        google.maps.visualRefresh = true;
        var map = null;
        var markers = [];
        var infoWindow;
        var myCenter=new google.maps.LatLng(&lt;?=$gmap_center_point?&gt;);
  
  
  &lt;!-- This function creates marker and populates the infobubble --&gt;
        function createMarker(latlng, name, address, profile_link, number_count, distance, featured, coupons, youtube_activate, additional_photo, logo, account_priority) {
  
        var html = "&lt;b&gt;" + name + "&lt;/b&gt; &lt;br/&gt;" + address + "&lt;br/&gt;&lt;font color=\"red\"&gt;Approx. " + distance.toFixed(1) + " miles away&lt;/font&gt;&lt;br/&gt;"
  &lt;!--      html += '&lt;a class="menu" href="javascript: map.setZoom('+zoom+');"&gt;Zoom To&lt;/a&gt;';  --&gt; 
  &lt;!--      html += ' &lt;a class="menu" href="javascript:function togglestreetview();"&gt;Street View&lt;/a&gt;';  --&gt;
  &lt;!--      html += ' | ';   --&gt;
        html += ' &lt;a  class="menu" href="javascript:map.setCenter(new google.maps.LatLng('+latlng.toUrlValue(6)+')); map.setZoom(parseInt(map.getZoom())+2);"&gt;Zoom In&lt;/a&gt;';
        html += ' | '; 
        html += ' &lt;a  class="menu" href="javascript:map.setCenter(new google.maps.LatLng('+latlng.toUrlValue(6)+')); map.setZoom(parseInt(map.getZoom())-2);"&gt;Out &lt;/a&gt;';
        html += '&lt;br/&gt;'+ profile_link ; 
  
  
        var marker = new MarkerWithLabel({
              map: map,
              position: latlng,
              animation: google.maps.Animation.DROP,
  
  &lt;!-- Label Options Reference http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.9/examples/--&gt;
              labelContent: number_count,
              labelAnchor: new google.maps.Point(8, 36),
              labelClass: "gmap_labels", // the CSS class for the label
              labelInBackground: false
              });
                marker.featured = featured;
                marker.coupon = coupons;
                marker.youtube = youtube_activate;
                marker.photo = additional_photo;
                marker.name = name;
  
                markers.push(marker);         
  
                google.maps.event.addListener(marker, 'click', function() {
                infoWindow.setContent(html);
                infoWindow.open(map, marker);
        });
  
     }
  
  
  
        // == shows all markers of a particular category, and ensures the checkbox is checked ==
        function show_type(option) {
          for (var i=0; i&lt;markers.length; i++) {
            if (markers[i].featured == 1){
              markers[i].setVisible(true);
            }
  
          }
         // == check the checkbox ==
          document.getElementById(option+"box").checked = true;
  
        }
  
        // == hides all markers of a particular category, and ensures the checkbox is cleared ==
        function hide_type(option) {
          for (var i=0; i&lt;markers.length; i++) {
            if (markers[i].featured == 1) {
              markers[i].setVisible(false);
            }
          }
            // == clear the checkbox ==
          document.getElementById(option+"box").checked = false;
          // == close the info window, in case its open on a marker that we just hid
          infoWindow.close( );
  
        }
  
       // == a checkbox has been clicked ==
        function boxclick(box,option) {
          if (box.checked) {
            show_type(option);
  
          } else {
            hide_type(option);
  
          }
          // == rebuild the side bar
          createSidebarEntry(name, address, distance, num, featured, coupons, youtube_activate, additional_photo, logo, profile_link, number_count);
  
        }
  
  &lt;!-- This function . . . --&gt;
        function createSidebarEntry(name, address, distance, num, featured, coupons, youtube_activate, additional_photo, logo, profile_link, number_count) {
  
        var html = ' ';
  
  
        html += '&lt;table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"5\"&gt;&lt;tr&gt;&lt;td width=\"20px\" valign=\"top\" align=\"right\"&gt;'
        html += '&lt;span style=\"padding: 3px; background-color: #F30; color: #FFF; font-weight: bold; font-size: 24px; font-family: Arial, Helvetica, sans-serif;\"&gt; '+ number_count + ' &lt;/td&gt;'
        html += '&lt;td &gt;'
        if (featured==1){ 
                      html += '&lt;img src=\"images/_icon_banner_featured.png\" width=\"180\" height=\"19\" /&gt;&lt;br/&gt;'
                      }else{ }
        html += '&lt;b&gt;' + name + '&lt;/b&gt;&lt;br/&gt;'
        html += '&lt;font color=\"red\" size=\"1\" &gt;Approx. ' + distance.toFixed(1) + ' miles away.&lt;/font&gt;&lt;br/&gt;'
        html += address + '&lt;br/&gt;'
        if (coupons==1 || youtube_activate==1 || additional_photo==1){
                               html +='&lt;table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\"&gt;&lt;tr&gt;'
                               if (coupons ==1){
                                   html +='&lt;td align=\"left\"&gt;&lt;img src=\"images/_icon_results_coupons.png\" width=\"30\" height=\"30\" alt=\"Coupons Available\" /&gt;' 
                               }else{ }
                               if (youtube_activate ==1){
                                   html +='&lt;img src=\"images/_icon_results_youtube.png\" width=\"30\" height=\"30\" alt=\"Videos Available\"/&gt;' 
                               }else{ }
                               if (additional_photo==1){
                                   html +='&lt;img src=\"images/_icon_results_photo.png\" width=\"30\" height=\"30\" alt=\"Photos Available\"/&gt;' 
                               }else{ }
                               html +='&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;'
                      }else{ }
  
        html +='&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;';
  
        var div = document.createElement("div");       
        div.value = num;
        div.innerHTML = html;
        div.style.cursor = 'pointer';
        div.style.marginBottom = '5px'; 
        sidebar.appendChild(div);
  
  
        google.maps.event.addDomListener(div, 'click', function() {
        google.maps.event.trigger(markers[num], 'click');
        });
        google.maps.event.addDomListener(div, 'mouseover', function() {
        div.style.backgroundColor = '#eee';
        });
        google.maps.event.addDomListener(div, 'mouseout', function() {
        div.style.backgroundColor = '#fff';
        });
  
  
      return div ;
  
      }
  
  
  
  &lt;!-- This function does the Search based on AddressInput --&gt;
       function searchLocations() {
       var address = document.getElementById("addressInput").value;
       var geocoder = new google.maps.Geocoder();
       geocoder.geocode({address: address}, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
          searchLocationsNear(results[0].geometry.location);
          } else {
          alert(address + ' not found');
          }
       });
     }
  
  
  &lt;!-- FUNCTION --&gt;
       function clearLocations() {
       infoWindow.close();
       for (var i = 0; i &lt; markers.length; i++) {
       markers[i].setMap(null);
       }
       markers.length = 0;
    }
  
  
  &lt;!-- This function queries the Processing File based on criteria set... radius... search term.  etc.--&gt;
       function searchLocationsNear(center) {
       clearLocations();
  
       var radius = document.getElementById('radiusSelect').value;
       var searchrequest = document.getElementById('search').value;
  
       var searchUrl = 'search_genxml.php?lat=' + center.lat() + '&amp;lng=' + center.lng() + '&amp;radius=' + radius + '&amp;searchrequest=' + searchrequest;
       downloadUrl(searchUrl, function(data) {
       var xml = parseXml(data);
       var markerNodes = xml.documentElement.getElementsByTagName("marker");
       var sidebar = document.getElementById('sidebar');
       sidebar.innerHTML = '';
  
           if (markerNodes.length == 0) {
               sidebar.innerHTML = 'No results found.';
               map.setZoom(6);
               map.setCenter(new google.maps.LatLng(&lt;?=$gmap_center_point?&gt;));
               return;
               }
  
               var bounds = new google.maps.LatLngBounds();
  
               for (var i = 0; i &lt; markerNodes.length; i++) {
  
      &lt;!-- GRAB THE VARIABLES ATTRIBUTES FROM PROCESSING FILE AND ASSIGN VARS TO EACH RESULT RETURNED --&gt;
               var v_id = markerNodes[i].getAttribute("v_id");
               var name = markerNodes[i].getAttribute("name");
               var address = markerNodes[i].getAttribute("address");
               var profile_link = markerNodes[i].getAttribute("profile_link");
               var featured = markerNodes[i].getAttribute("featured");            
               var coupons = markerNodes[i].getAttribute("coupons");
               var youtube_activate = markerNodes[i].getAttribute("youtube_activate");     
               var additional_photo = markerNodes[i].getAttribute("additional_photo");
               var category_id = markerNodes[i].getAttribute("category_id");
               var category_name = markerNodes[i].getAttribute("category_name");
               var sub_cat_id = markerNodes[i].getAttribute("sub_cat_id");
               var sub_cat_name = markerNodes[i].getAttribute("sub_cat_name");
               var account_priority = markerNodes[i].getAttribute("account_priority");
               var logo = markerNodes[i].getAttribute("logo");
               var number_count = markerNodes[i].getAttribute("number_count");
               var distance = parseFloat(markerNodes[i].getAttribute("distance"));
               var latlng = new google.maps.LatLng(
                    parseFloat(markerNodes[i].getAttribute("lat")),
                    parseFloat(markerNodes[i].getAttribute("lng")));
  
  
                    createSidebarEntry(name, address, distance, i, featured, coupons, youtube_activate, additional_photo, logo, profile_link, number_count, account_priority);
  
                    createMarker(latlng, name, address, profile_link, number_count, distance, featured, coupons, youtube_activate, additional_photo, logo, account_priority);
  
                    bounds.extend(latlng);
                    }
                  // == show or hide the categories initially ==
                  show_type("featured");
  
                  // == create the initial sidebar ==   
  
  
                  map.fitBounds(bounds);
                  filtering.style.visibility = "visible";
           });
  
  
    }
  
  
        &lt;!-- FUNCTION --&gt;
        function load() {
        map = new google.maps.Map(document.getElementById("map"), {
              center: new google.maps.LatLng(&lt;?=$gmap_center_point?&gt;),
              zoom: 10,
              mapTypeId: 'roadmap',
              mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
              });
  
              infoWindow = new google.maps.InfoWindow();
  
                &lt;!-- STICK A CUSTOM PIN IN CENTER LOCATION --&gt;
                var center_marker=new google.maps.Marker({
                map:map,
                position:myCenter,
                clickable: true,
                icon:'/images/GHV_map_marker.png'
                });
                      center_marker.info = new google.maps.InfoWindow({
                      content: 'My Location'
                      });
                              google.maps.event.addListener(center_marker, 'click', function() {
                              center_marker.info.open(map, center_marker);
                              });  
  
                                    center_marker.setMap(map);
  
                                    &lt;!-- THIS FUNCTION LAUNCHES ONLY AFTER FULL PAGE IS LOADED AND RUNS SEARCHLOCATIONS WITH SET VARIABLE --&gt;
                                    google.maps.event.addListenerOnce(map, 'idle', function () {
  
                                    searchLocations(&lt;?=$gmap_center_point?&gt;);
  
                                    });
  
      }
  
  
  
  &lt;!-- This function . . . --&gt;
        function downloadUrl(url, callback) {
        var request = window.ActiveXObject ?
            new ActiveXObject('Microsoft.XMLHTTP') :
            new XMLHttpRequest;
  
            request.onreadystatechange = function() {
            if (request.readyState == 4) {
            request.onreadystatechange = doNothing;
            callback(request.responseText, request.status);
          }
        };
        request.open('GET', url, true);
        request.send(null);
      }
  
  
  &lt;!-- This function . . . --&gt;
          function parseXml(str) {
          if (window.ActiveXObject) {
          var doc = new ActiveXObject('Microsoft.XMLDOM');
          doc.loadXML(str);
          return doc;
          } else if (window.DOMParser) {
          return (new DOMParser).parseFromString(str, 'text/xml');
          }
      }
  
  
  
  &lt;!-- This function . . . --&gt;
      function doNothing() {}
  
      //]]&gt;
  &lt;/script&gt;
  </code></pre>