CodingForums.com - Google Maps API JavaScript

I have a working script and I want to add a toogleGroup command (which I have) to the end of the working script so that I can toggle map markers with radio buttons. Probably a simple addition.

WORKING CODE:

Code:

    //<![CDATA[  

    var iconPink = new GIcon(); 

    iconPink.image = 'http://www.golfinggreys.com/img/ggmap_icon_attraction.png';

    iconPink.shadow = '';

    iconPink.iconSize = new GSize(24, 31);

    iconPink.shadowSize = new GSize(0, 0);

    iconPink.iconAnchor = new GPoint(11, 30);

    iconPink.infoWindowAnchor = new GPoint(5, 1);



    var iconOrange = new GIcon(); 

    iconOrange.image = 'http://www.golfinggreys.com/img/ggmap_icon_accomm.png';

    iconOrange.shadow = '';

    iconOrange.iconSize = new GSize(24, 31);

    iconOrange.shadowSize = new GSize(0, 0);

    iconOrange.iconAnchor = new GPoint(11, 30);

    iconOrange.infoWindowAnchor = new GPoint(5, 1);



    var iconPurple = new GIcon(); 

    iconPurple.image = 'http://www.golfinggreys.com/img/ggmap_icon_dining.png';

    iconPurple.shadow = '';

    iconPurple.iconSize = new GSize(24, 31);

    iconPurple.shadowSize = new GSize(0, 0);

    iconPurple.iconAnchor = new GPoint(11, 30);

    iconPurple.infoWindowAnchor = new GPoint(5, 1);



    var iconGreen = new GIcon(); 

    iconGreen.image = 'http://www.golfinggreys.com/img/ggmap_icon_golf.png';

    iconGreen.shadow = '';

    iconGreen.iconSize = new GSize(24, 31);

    iconGreen.shadowSize = new GSize(0, 0);

    iconGreen.iconAnchor = new GPoint(11, 30);

    iconGreen.infoWindowAnchor = new GPoint(5, 1);



    var iconRed = new GIcon(); 

    iconRed.image = 'http://www.golfinggreys.com/img/ggmap_icon_golfr.png';

    iconRed.shadow = '';

    iconRed.iconSize = new GSize(24, 31);

    iconRed.shadowSize = new GSize(0, 0);

    iconRed.iconAnchor = new GPoint(11, 30);

    iconRed.infoWindowAnchor = new GPoint(5, 1);



    var iconGrey = new GIcon(); 

    iconGrey.image = 'http://www.golfinggreys.com/img/ggmap_icon_services.png';

    iconGrey.shadow = '';

    iconGrey.iconSize = new GSize(24, 31);

    iconGrey.shadowSize = new GSize(0, 0);

    iconGrey.iconAnchor = new GPoint(11, 30);

    iconGrey.infoWindowAnchor = new GPoint(5, 1);



    var iconBlue = new GIcon(); 

    iconBlue.image = 'http://www.golfinggreys.com/img/ggmap_icon_shopping.png';

    iconBlue.shadow = '';

    iconBlue.iconSize = new GSize(24, 31);

    iconBlue.shadowSize = new GSize(0, 0);

    iconBlue.iconAnchor = new GPoint(11, 30);

    iconBlue.infoWindowAnchor = new GPoint(5, 1);



    var customIcons = [];

    customIcons["attraction"] = iconPink;

    customIcons["accomm"] = iconOrange;

    customIcons["dining"] = iconPurple;

    customIcons["golf"] = iconGreen;

    customIcons["golfr"] = iconRed;

    customIcons["services"] = iconGrey;

    customIcons["shopping"] = iconBlue;

    var markerGroups = { "attraction": [], "accomm": [], "dining": [], "golf": [], "golfr": [], "services": [], "shopping": []};



        function load() {

                if (GBrowserIsCompatible()) {

                

                  var i = 0;

        

                  // Create the map

                  // Make sure this element has the same ID as your div

                  map = new GMap2(document.getElementById("googlemap"));

                  // Add controls for moving and zooming the map.  Use GSmallMapControl for small maps

          map.addControl(new GSmallMapControl());

                  // Add controls for switching between regular and satellite views

                  map.addControl(new GMapTypeControl());

                  // Set the starting position and zoom level when the map loads

                  map.setCenter(new GLatLng(51.920556,-103.798828), 7);

        

        

                  // Read the data from XML

                  var request = GXmlHttp.create();

                  // Open the XML file

                  request.open("GET", "east_central.xml", true);

                  request.onreadystatechange = function() {

                        if (request.readyState == 4) {

                          var xmlDoc = request.responseXML;

                          // Obtain the array of markers and loop through it

                          var markers = xmlDoc.documentElement.getElementsByTagName("marker");

                          

                          for (var i = 0; i < markers.length; i++) {

                                // Obtain the attribues of each marker

                                var lat = parseFloat(markers[i].getAttribute("lat"));

                                var lng = parseFloat(markers[i].getAttribute("lng"));

                                var point = new GLatLng(lat,lng);

                                var name = markers[i].getAttribute("name");

                                var phone = markers[i].getAttribute("phone");

                                var address = markers[i].getAttribute("address");

                                var city = markers[i].getAttribute("city");

                                var state = markers[i].getAttribute("state");

                                var url = markers[i].getAttribute("url");

                var type = markers[i].getAttribute("type");

                                var marker = createMarker(point,name,phone,address,city,state,url,type);

                                map.addOverlay(marker);

                          }

                        }

                  }

                  request.send(null);

                  

                  // Function to create the marker and set up the event window

                  function createMarker(point,name,phone,address,city,state,url,type) {

          var marker = new GMarker(point, customIcons[type]);

          markerGroups[type].push(marker);

                        var markerhtml = "";

                        if (name != "") markerhtml += "<b>" + name + "</b><br>";

                        markerhtml += address + ", " + city + ", " + state + "<br>";

                        if (phone != "") markerhtml += "p:" + phone + "<br>";

                        if (url != "") markerhtml += "<a href=\"" + url + "\">COURSE DETAILS</a>";

                        // Add a click event to each marker which will open the HTML window

                        GEvent.addListener(marker, "click", function() {

                          marker.openInfoWindowHtml(markerhtml);

                        });

                        i++;

                        return marker;

                  }

                }

                // Javascript alert for older browsers where Google Maps isn't supported

                else {

                  alert("Sorry, the Google Maps API is not compatible with this browser");

                }

        }

    //]]>

THE ADDITION

Code:

    function toggleGroup(type) {

      for (var i = 0; i < markerGroups[type].length; i++) {

        var marker = markerGroups[type][i];

        if (marker.isHidden()) {

          marker.show();

        } else {

          marker.hide();

        }

Just need to properly add that to the end. I am okay at editing and adapting codes, but I don't know the sytax. Tried JSLINT but still confused. Probably quite simple. Thanks