I wonder whether someone can help please. I’m trying to put together a script

Question

0

Asked: May 25, 20262026-05-25T18:00:43+00:00 2026-05-25T18:00:43+00:00

I wonder whether someone can help please. I’m trying to put together a script

0

I wonder whether someone can help please.

I’m trying to put together a script which hides and shows locations on my map. The host code I’ve been using is here and my code is shown below:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Google Maps Javascript API v3 Example: Marker Categories</title> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    <title>Google Maps</title>
<style type="text/css">
html, body { height: 100%; } 
</style>
    <script type="text/javascript">
            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)<<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<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<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<gmarkers.length; i++) {
          if (gmarkers[i].getVisible()) {
            html += '<a href="javascript:myclick(' + i + ')">' + gmarkers[i].myname + '<\/a><br>';
          }
        }
        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 < 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 = "<b>" + 'Find : ' + "</b>" + findname + "<p>" + "<b>" + 'Description: ' + "</b>" + finddescription + "</p>"
          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();
      });
    }

    </script>
  </head>
<body style="margin:0px; padding:0px;" onload="initialize()"> 




    <!-- you can use tables or divs for the overall layout -->
    <table border=1>
      <tr>
        <td>
           <div id="map" style="width: 550px; height: 450px"></div>
        </td>
        <td valign="top" style="width:150px; text-decoration: underline; color: #4444ff;"> 
           <div id="side_bar"></div>
        </td>
      </tr>
    </table>
    <form action="#">
      Artefact: <input type="checkbox" id="Artefactbox" onclick="boxclick(this,'Artefact')" /> &nbsp;&nbsp;
      Coin: <input type="checkbox" id="Coinbox" onclick="boxclick(this,'Coin')" /> &nbsp;&nbsp;
      Jewellery: <input type="checkbox" id="Jewellerybox" onclick="boxclick(this,'Jewellery')" /><br />
      Precious Metal: <input type="checkbox" id="PreciousMetalbox" onclick="boxclick(this,'Precious_Metal')" /><br />
    </form>  

  </body>

</html>

When I try and run my code I get the following error:
Message: Expected identifier, string or number
Line: 42
Char: 1

The line which it points to is this

function createMarker(point,findname,html,findcategory) {

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.

I just wondered whether someone could take a look at this please and let me know where I’m going wrong.

Many thanks

UPDATED CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Map My Finds - Public Finds</title>
        <link rel="stylesheet" href="css/publicfinds.css" type="text/css" media="all" />
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=en"></script>
        <script type="text/javascript"> 
            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)<<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<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<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<gmarkers.length; i++) {
          if (gmarkers[i].getVisible()) {
            html += '<a href="javascript:myclick(' + i + ')">' + gmarkers[i].myname + '<\/a><br>';
          }
        }
        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 < 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 = "<b>" + 'Find : ' + "</b>" + findname + "<p>" + "<b>" + 'Description: ' + "</b>" + finddescription + "</p>"
            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() {} 
            }
            </script>  </head>     <body onLoad="load()">
                <div id="map"></div> <!-- you can use tables or divs for the overall layout --> <form action="#">
      Theatres: <input type="checkbox" id="Artefact" onclick="boxclick(this,'Artefact')" /> &nbsp;&nbsp;
      Golf Courses: <input type="checkbox" id="Coin" onclick="boxclick(this,'Coin')" /> &nbsp;&nbsp;
       Golf Courses: <input type="checkbox" id="Jewellery" onclick="boxclick(this,'Jewellery')" /> &nbsp;&nbsp;
      Tourist Information: <input type="checkbox" id="Precious Metal" onclick="boxclick(this,'Precious Metal')" /><br />
       </form>       </body>  </html>

Report

Leave an answer
Cancel reply

You must login to add an answer.

Need An Account,

1 Answer

Editorial Team · Answer 1 · 2026-05-25T18:00:44+00:00

Couple syntax errors I noticed:

1.) All of you code was wrapped in the InfoWindow object

change this:

var infowindow = new google.maps.InfoWindow(
  {

to this:

var infowindow = new google.maps.InfoWindow();

2.) You are setting the icon property wrong in the marker

change this:

 var marker = new google.maps.Marker({
        position: point,
        var icon = customIcons[findcategory], //wont work
        shadow: iconShadow,
        map: map,
        title: findname,
        zIndex: Math.round(latlng.lat()*-100000)<<5
        });

to this:

 var marker = new google.maps.Marker({
        position: point,
        icon: customIcons[findcategory],
        shadow: iconShadow,
        map: map,
        title: findname,
        zIndex: Math.round(latlng.lat()*-100000)<<5
        });

I was not receiving any more syntax errors in Visual Studio after making these changes.

Edit to include additional fix:

the downloadUrl function is not defined on this page. You did not include the script file in the head area of the page.

Add this right after where the Google maps api is referenced:

<script type="text/javascript" src="scripts/downloadxml.js"></script>

Update

Looks like you changed the name of the point parameter to latlng in the createMarker function, but did not change it everywhere inside the function. The position property is still set to point. Also it looks like you might be missing the closing bracket for the create marker function as well.

function createMarker(latlng,name,html,category) { 
    var contentString = html; 
    var marker = new google.maps.Marker({  
        position: latlng, //changed from 'point' 
        icon: customIcons[findcategory],  
        shadow: iconShadow, 
        map: map, 
        title: findname,  
        zIndex: Math.round(latlng.lat()*-100000)<<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);
    });

} //is this where this function ends?

I would recommend that you put all of this script into a separate file and then reference it with a <script type="text/javascript" src="path to your script" /> tag. It will make the file easier to maintain and troubleshoot in the future.

Sign Up

Sign In

Forgot Password

The Archive Base Latest Questions

I wonder whether someone can help please. I’m trying to put together a script

Leave an answerCancel reply

1 Answer

Leave an answer
Cancel reply