I wonder whether someone may be able to help me please. I’m trying to

Question

0

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

I wonder whether someone may be able to help me please. I’m trying to

0

I wonder whether someone may be able to help me please.

I’m trying to put some code together where I can load markers from a mySQL database onto my map with the markers falling into one of four categories.

What I would like to do, if possible, is to toggle which markers are shown or hidden by way of check boxes which I’ve set up on my form.

I can get the code to work which pulls the marker data and plots them on my map but I’m struggling to get the section that allows the markers to be shown or hidden to work. I’ve used this as a starting point, but I’ve obviously not understood the example correctly.

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

Many thanks and kind regards

Chris

<!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'
            }
            };

            function load() { 
            var map = new google.maps.Map(document.getElementById("map"), { 
            center: new google.maps.LatLng(54.312195845815246,-4.45948481875007), 
            zoom:6, 
            mapTypeId: 'terrain' 
            }); 

            var infoWindow = new google.maps.InfoWindow;

            // Change this depending on the name of your PHP file 
            downloadUrl("PHPFILE.php", function(data) { 
            var xml = data.responseXML; 
            var markers = xml.documentElement.getElementsByTagName("marker");
            var bounds = new google.maps.LatLngBounds();
            for (var i = 0; i < markers.length; i++) { 
            var findcategory = markers[i].getAttribute("findcategory");
            var findname = markers[i].getAttribute("findname");
            var finddescription = markers[i].getAttribute("finddescription");
            var point = new google.maps.LatLng( 
            parseFloat(markers[i].getAttribute("findosgb36lat")), 
            parseFloat(markers[i].getAttribute("findosgb36lon")));
            var html = "<b>" + 'Find : ' + "</b>" + findname + "<p>" + "<b>" + 'Description: ' + "</b>" + finddescription + "</p>"
            var icon = customIcons[findcategory] || {}; 
            var marker = new google.maps.Marker({          
            map: map, 
            position: point,
            icon: icon.icon,
            shadow: icon.shadow
            }); 
            bounds.extend(point);
            map.fitBounds(bounds);
            bindInfoWindow(marker, map, infoWindow, html);
            } 
            }); 
            } 


      // == shows all markers of a particular category, and ensures the checkbox is checked ==
      function show(category) {
        for (var i=0; i<markers.length; i++) {
          if (markers[i].mycategory == findcategory) {
           markers[i].setVisible(true);
          }
        }
        // == check the checkbox ==
        document.getElementById(category+"box").checked = true;
      }

      // == hides all markers of a particular category, and ensures the checkbox is cleared ==
      function hide(category) {
        for (var i=0; i<markers.length; i++) {
          if (markers[i].mycategory == findcategory) {
            markers[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);
        }


            function bindInfoWindow(marker, map, infoWindow, html) {
            google.maps.event.addListener(marker, 'click', function() {
            infoWindow.setContent(html);
            infoWindow.open(map, marker);
            });
            }

            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()">
                <p>&nbsp;</p>
                <form id="Public Finds" method="post" action="">
                  <p align="left">
                    <input name="artefact" type="checkbox" id="artefact" value="checkbox" />
Artefact </p>
                  <p align="left">
                    <input name="coin" type="checkbox" id="coin" value="checkbox" />
Coin</p>
                  <p align="left">
                    <input name="jewellery" type="checkbox" id="jewellery" value="checkbox" />
                  Jewellery</p>
                  <p align="left">
                    <input name="preciousmetal" type="checkbox" id="preciousmetal" value="checkbox" />
                  Precious Metal</p>
                </form>
                <p>&nbsp;</p>
                <div id="map"></div>
            </body> 
</html>

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'
            }
            };

            var gmarkers = [];

            function load() { 
            var map = new google.maps.Map(document.getElementById("map"), { 
            center: new google.maps.LatLng(54.312195845815246,-4.45948481875007), 
            zoom:6, 
            mapTypeId: 'terrain' 
            }); 

            var infoWindow = new google.maps.InfoWindow;

            // Change this depending on the name of your PHP file 
            downloadUrl("PHPFILE.php", function(data) { 
            var xml = data.responseXML; 
            var markers = xml.documentElement.getElementsByTagName("marker");
            var bounds = new google.maps.LatLngBounds();
            for (var i = 0; i < markers.length; i++) { 
            var findcategory = markers[i].getAttribute("findcategory");
            var findname = markers[i].getAttribute("findname");
            var finddescription = markers[i].getAttribute("finddescription");
            var point = new google.maps.LatLng( 
            parseFloat(markers[i].getAttribute("findosgb36lat")), 
            parseFloat(markers[i].getAttribute("findosgb36lon")));
            var html = "<b>" + 'Find : ' + "</b>" + findname + "<p>" + "<b>" + 'Description: ' + "</b>" + finddescription + "</p>"
            var icon = customIcons[findcategory] || {}; 
            var marker = new google.maps.Marker({          
            map: map, 
            position: point,
            icon: icon.icon,
            shadow: icon.shadow
            }); 
            marker.mycategory = findcategory;
            bounds.extend(point);
            map.fitBounds(bounds);
            bindInfoWindow(marker, map, infoWindow, html);
            } 
            }); 
            } 


              // == 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(category) {
        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;
      }

      // == a checkbox has been clicked ==
      function boxclick(box,findcategory) {
        if (box.checked) {
          show(findcategory);
        } else {
          hide(findcategory);
        }

      function myclick(i) {
        google.maps.event.trigger(gmarkers[i],"click");
      }

    // == show or hide the categories initially ==
        hide("artefact");
        hide("coin");
        hide("jewellery");
        hide("precious_metal");

            function bindInfoWindow(marker, map, infoWindow, html) {
            google.maps.event.addListener(marker, 'click', function() {
            infoWindow.setContent(html);
            infoWindow.open(map, marker);
            });
            }

            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()">
                <p>&nbsp;</p>
      <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')" /> &nbsp;&nbsp;
      Precious Metal: <input type="checkbox" id="preciousmetalbox" onclick="boxclick(this,'preciousmetal')" /><br />
    </form>  
                <p>&nbsp;</p>
                <div id="map"></div>
            </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:38:06+00:00

Editorial Team

2026-05-25T18:38:06+00:00Added an answer on May 25, 2026 at 6:38 pm

Looks like you need to have something that actually calls your boxclick function.

0

Reply
Share
Share

- Report

Sign Up

Sign In

Forgot Password

The Archive Base Latest Questions

I wonder whether someone may be able to help me please. I’m trying to

Leave an answerCancel reply

1 Answer

Leave an answer
Cancel reply