Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New to the CF scene
    Join Date
    Sep 2009
    Location
    Manitoba, Canada
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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
    Last edited by pasigdesigns; 09-05-2009 at 07:44 PM. Reason: Probably should have found a currebt thread for this?


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •