[pasigdesigns]

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:

    //<![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

    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