title: Hide/Show Map Markers
body: <p>I wonder whether someone can help please.</p>
  
  <p>I'm trying to put together a script which hides and shows locations on my map. The host code I've been using is <a href="http://www.geocodezip.com/v3_MW_example_categories.html" rel="nofollow">here</a> and my code is shown below:</p>
  
  <pre><code>!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"&gt;
  &lt;head&gt; 
  &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no" /&gt; 
  &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"/&gt; 
      &lt;title&gt;Google Maps Javascript API v3 Example: Marker Categories&lt;/title&gt; 
  &lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"&gt;&lt;/script&gt; 
      &lt;title&gt;Google Maps&lt;/title&gt;
  &lt;style type="text/css"&gt;
  html, body { height: 100%; } 
  &lt;/style&gt;
      &lt;script type="text/javascript"&gt;
              var customIcons = {
              "Artefact": {
              icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
              shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
              },
              "Coin": {
              icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png',
              shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
              },
              "Jewellery": {
              icon: 'http://labs.google.com/ridefinder/images/mm_20_yellow.png',
              shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
              },
              "Precious Metal": {
              icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
              shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
              }
              };
  
        // this variable will collect the html which will eventually be placed in the side_bar 
        var side_bar_html = ""; 
  
        var gmarkers = [];
        var map = null;
  
  var infowindow = new google.maps.InfoWindow(
    { 
  
            // A function to create the marker and set up the event window
  function createMarker(point,findname,html,findcategory) {
      var contentString = html;
      var marker = new google.maps.Marker({
          position: point,
          var icon = customIcons[findcategory],
          shadow: iconShadow,
          map: map,
          title: findname,
          zIndex: Math.round(latlng.lat()*-100000)&lt;&lt;5
          });
          // === Store the category and name info as a marker properties ===
          marker.mycategory = findcategory;                                 
          marker.myname = findname;
          gmarkers.push(marker);
  
      google.maps.event.addListener(marker, 'click', function() {
          infowindow.setContent(contentString); 
          infowindow.open(map,marker);
          });
  }
  
        // == shows all markers of a particular category, and ensures the checkbox is checked ==
        function show(findcategory) {
          for (var i=0; i&lt;gmarkers.length; i++) {
            if (gmarkers[i].mycategory == findcategory) {
              gmarkers[i].setVisible(true);
            }
          }
          // == check the checkbox ==
          document.getElementById(findcategory+"box").checked = true;
        }
  
        // == hides all markers of a particular category, and ensures the checkbox is cleared ==
        function hide(findcategory) {
          for (var i=0; i&lt;gmarkers.length; i++) {
            if (gmarkers[i].mycategory == findcategory) {
              gmarkers[i].setVisible(false);
            }
          }
          // == clear the checkbox ==
          document.getElementById(findcategory+"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,findcategory) {
          if (box.checked) {
            show(findcategory);
          } else {
            hide(findcategory);
          }
          // == rebuild the side bar
          makeSidebar();
        }
  
        function myclick(i) {
          google.maps.event.trigger(gmarkers[i],"click");
        }
  
  
        // == rebuilds the sidebar to match the markers currently displayed ==
        function makeSidebar() {
          var html = "";
          for (var i=0; i&lt;gmarkers.length; i++) {
            if (gmarkers[i].getVisible()) {
              html += '&lt;a href="javascript:myclick(' + i + ')"&gt;' + gmarkers[i].myname + '&lt;\/a&gt;&lt;br&gt;';
            }
          }
          document.getElementById("side_bar").innerHTML = html;
        }
  
    function initialize() {
      var myOptions = {
        zoom:6,  
        center: new google.maps.LatLng(54.312195845815246,-4.45948481875007),
        mapTypeId: google.maps.MapTypeId.TERRAIN
      }
      map = new google.maps.Map(document.getElementById("map"), myOptions);
  
  
      google.maps.event.addListener(map, 'click', function() {
          infowindow.close();
          });
  
  
  
        // Read the data
    downloadUrl("loadpublicfinds.php", function(data) { 
              var xml = data.responseXML; 
    var markers = xml.documentElement.getElementsByTagName("marker");
  
          for (var i = 0; i &lt; markers.length; i++) {
            // obtain the attribues of each marker
            var lat = parseFloat(markers[i].getAttribute("findosgb36lat"));
            var lng = parseFloat(markers[i].getAttribute("findosgb36lon"));
            var point = new google.maps.LatLng(lat,lng);
            var findname = markers[i].getAttribute("findname");
            var finddescription = markers[i].getAttribute("finddescription");
            var html = "&lt;b&gt;" + 'Find : ' + "&lt;/b&gt;" + findname + "&lt;p&gt;" + "&lt;b&gt;" + 'Description: ' + "&lt;/b&gt;" + finddescription + "&lt;/p&gt;"
            var findcategory = markers[i].getAttribute("findcategory");
            // create the marker
            var marker = createMarker(point,findname,html,findcategory);
          }
  
          // == show or hide the categories initially ==
          show("Artefact");
          hide("Coin");
          hide("Jewellery");
          hide("Precious Metal");
          // == create the initial sidebar ==
          makeSidebar();
        });
      }
  
      &lt;/script&gt;
    &lt;/head&gt;
  &lt;body style="margin:0px; padding:0px;" onload="initialize()"&gt; 
  
  
  
  
      &lt;!-- you can use tables or divs for the overall layout --&gt;
      &lt;table border=1&gt;
        &lt;tr&gt;
          &lt;td&gt;
             &lt;div id="map" style="width: 550px; height: 450px"&gt;&lt;/div&gt;
          &lt;/td&gt;
          &lt;td valign="top" style="width:150px; text-decoration: underline; color: #4444ff;"&gt; 
             &lt;div id="side_bar"&gt;&lt;/div&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
      &lt;form action="#"&gt;
        Artefact: &lt;input type="checkbox" id="Artefactbox" onclick="boxclick(this,'Artefact')" /&gt; &amp;nbsp;&amp;nbsp;
        Coin: &lt;input type="checkbox" id="Coinbox" onclick="boxclick(this,'Coin')" /&gt; &amp;nbsp;&amp;nbsp;
        Jewellery: &lt;input type="checkbox" id="Jewellerybox" onclick="boxclick(this,'Jewellery')" /&gt;&lt;br /&gt;
        Precious Metal: &lt;input type="checkbox" id="PreciousMetalbox" onclick="boxclick(this,'Precious_Metal')" /&gt;&lt;br /&gt;
      &lt;/form&gt;  
  
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>When I try and run my code I get the following error: 
  Message: Expected identifier, string or number
  Line: 42
  Char: 1</p>
  
  <p>The line which it points to is this </p>
  
  <pre><code>function createMarker(point,findname,html,findcategory) {
  </code></pre>
  
  <p>I'm fairly new to this, but I've run the code through 'Firebug' and it states that the line id 'missing: propertyid' but I must admit I'm not sure what this means.</p>
  
  <p>I just wondered whether someone could take a look at this please and let me know where I'm going wrong.</p>
  
  <p>Many thanks</p>
  
  <p><strong>UPDATED CODE</strong></p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" lang="en"&gt;
      &lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
          &lt;title&gt;Map My Finds - Public Finds&lt;/title&gt;
          &lt;link rel="stylesheet" href="css/publicfinds.css" type="text/css" media="all" /&gt;
          &lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&amp;language=en"&gt;&lt;/script&gt;
          &lt;script type="text/javascript"&gt; 
              var customIcons = {
              "Artefact": {
              icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
              shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
              },
              "Coin": {
              icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png',
              shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
              },
              "Jewellery": {
              icon: 'http://labs.google.com/ridefinder/images/mm_20_yellow.png',
              shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
              },          "Precious Metal": {
              icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
              shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
              }
              };
  
                 // this variable will collect the html which will eventually be placed in the side_bar 
        var side_bar_html = ""; 
  
        var gmarkers = [];      var markers;
  
  var infowindow = new google.maps.InfoWindow(); 
  
  
  function createMarker(latlng,name,html,category) { var contentString = html; var marker = new google.maps.Marker({  position: point,  icon: customIcons[findcategory],  shadow: iconShadow,  map: map,  title: findname,  zIndex: Math.round(latlng.lat()*-100000)&lt;&lt;5  }); 
  
       // === Store the category and name info as a marker properties ===
          marker.mycategory = findcategory;                             
  
          marker.myname = findname;
          gmarkers.push(marker);
  
      google.maps.event.addListener(marker, 'click', function() {
          infowindow.setContent(contentString); 
          infowindow.open(map,marker);
          });
  
        // == shows all markers of a particular category, and ensures the checkbox is checked ==
        function show(findcategory) {
          for (var i=0; i&lt;gmarkers.length; i++) {
            if (gmarkers[i].mycategory == findcategory) {
              gmarkers[i].setVisible(true);
            }
          }
          // == check the checkbox ==
          document.getElementById(findcategory+"box").checked = true;
        }
  
        // == hides all markers of a particular category, and ensures the checkbox is cleared ==
        function hide(findcategory) {
          for (var i=0; i&lt;gmarkers.length; i++) {
            if (gmarkers[i].mycategory == findcategory) {
              gmarkers[i].setVisible(false);
            }
          }
          // == clear the checkbox ==
          document.getElementById(findcategory+"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,findcategory) {
          if (box.checked) {
            show(findcategory);
          } else {
            hide(findcategory);
          }
          // == rebuild the side bar
          makeSidebar();
        }
  
        function myclick(i) {
          google.maps.event.trigger(gmarkers[i],"click");
        }
  
  
        // == rebuilds the sidebar to match the markers currently displayed ==
        function makeSidebar() {
          var html = "";
          for (var i=0; i&lt;gmarkers.length; i++) {
            if (gmarkers[i].getVisible()) {
              html += '&lt;a href="javascript:myclick(' + i + ')"&gt;' + gmarkers[i].myname + '&lt;\/a&gt;&lt;br&gt;';
            }
          }
          document.getElementById("side_bar").innerHTML = html;
        }                 function load() { 
              var map = new google.maps.Map(document.getElementById("map"), { 
              center: new google.maps.LatLng(54.312195845815246,-4.45948481875007), 
              zoom:6, 
              mapTypeId: 'terrain' 
              }); 
  
  
      google.maps.event.addListener(map, 'click', function() {
          infowindow.close();
          });
  
              // Change this depending on the name of your PHP file 
              downloadUrl("loadpublicfinds.php", function(data) { 
              var xml = data.responseXML; 
              var markers = xml.documentElement.getElementsByTagName("marker");
              for (var i = 0; i &lt; markers.length; i++) { 
              var lat = parseFloat(markers[i].getAttribute("findosgb36lat"));
              var lng = parseFloat(markers[i].getAttribute("findosgb36lon"));             var point = new google.maps.LatLng(lat,lng);            var findcategory = markers[i].getAttribute("findcategory");             var findname = markers[i].getAttribute("findname");             var finddescription = markers[i].getAttribute("finddescription");
              var html = "&lt;b&gt;" + 'Find : ' + "&lt;/b&gt;" + findname + "&lt;p&gt;" + "&lt;b&gt;" + 'Description: ' + "&lt;/b&gt;" + finddescription + "&lt;/p&gt;"
              var marker = createMarker(point,findname,html,findcategory);
          }
        // == show or hide the categories initially ==
          show("Artefact");
          hide("Coin");
          hide("Jewellery");      hide("Precious Metal");
          // == create the initial sidebar ==
          makeSidebar();
        });
      }
              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, request.status); 
              } 
              }; 
  
              request.open('GET', url, true); 
              request.send(null); 
              } 
  
              function doNothing() {} 
              }
              &lt;/script&gt;  &lt;/head&gt;     &lt;body onLoad="load()"&gt;
                  &lt;div id="map"&gt;&lt;/div&gt; &lt;!-- you can use tables or divs for the overall layout --&gt; &lt;form action="#"&gt;
        Theatres: &lt;input type="checkbox" id="Artefact" onclick="boxclick(this,'Artefact')" /&gt; &amp;nbsp;&amp;nbsp;
        Golf Courses: &lt;input type="checkbox" id="Coin" onclick="boxclick(this,'Coin')" /&gt; &amp;nbsp;&amp;nbsp;
         Golf Courses: &lt;input type="checkbox" id="Jewellery" onclick="boxclick(this,'Jewellery')" /&gt; &amp;nbsp;&amp;nbsp;
        Tourist Information: &lt;input type="checkbox" id="Precious Metal" onclick="boxclick(this,'Precious Metal')" /&gt;&lt;br /&gt;
         &lt;/form&gt;       &lt;/body&gt;  &lt;/html&gt;
  </code></pre>