// JScript File
    var map;
    var directionsPanel;
    var directions;
    var gdir;
    var homelatlng;
    var centerpoint;
    var homepoint;
    var mrkr;
    var xcoord;
    var ycoord;
    var panel_html = "";
    var gmarkers = [];
    var htmls = [];
    var mi = 0;
    var Ctgry = [];
    
    function MarkerCategory(name, centerpiont, zoom, panel, list, nav)
    {
        this.Name = name;
        this.Center = centerpiont;
        this.Zoom = zoom;
        this.Panel = panel;
        this.List = list;
        this.Nav = nav;
    }
    
    function initialize() {
      //alert(name);
      //alert(address);
      xcoord = 39.409573;
      ycoord = -120.409019;
      if (GBrowserIsCompatible()) {      

        map = new GMap2(document.getElementById("map_canvas"));
        map.addControl(new GSmallMapControl());
        centerpoint = new GLatLng(39.26203141523749,-120.10665893554687);
        homepoint = new GLatLng(xcoord, ycoord);
        map.setCenter(centerpoint, 11);
        //mrkr = createMarker(homepoint);
        //map.addOverlay(mrkr); 

        var baseIcon = new GIcon();
        baseIcon.iconAnchor = new GPoint(15, 47);
        baseIcon.infoWindowAnchor = new GPoint(15, 50);
        baseIcon.infoShadowAnchor = new GPoint(18, 25);
        createMarkerCategory('Resorts', new GLatLng(39.07677595221322,-120.00228881835938), 9,'resortpanel','resortlist', '');
        createMarkerCategory('Lodging', new GLatLng(39.24014385893248,-120.07884979248047), 11,'lodgingpanel','lodginglist', '');
        createMarkerCategory('Food', new GLatLng(39.24014385893248,-120.07884979248047), 11,'foodpanel','foodlist', '');
        //alert(1);
        //alert(Ctgry[0].Name);
        //alert(Ctgry[1].Name);
        //alert(Ctgry[2].Name);
          // Read the data from example.xml
          var resortsrequest = GXmlHttp.create();
          resortsrequest.open("GET", "xml/resorts4.xml", true);
          resortsrequest.onreadystatechange = function() {
            //alert(2);
            if (resortsrequest.readyState == 4) {
                //alert(3);
              var xmlDoc = GXml.parse(resortsrequest.responseText);
              // obtain the array of markers and loop through it
              var markers = xmlDoc.documentElement.getElementsByTagName("marker");

                var specialIcon = new GIcon();
                specialIcon.iconSize = new GSize(42, 32);
                specialIcon.shadowSize = new GSize(60, 32);
                specialIcon.iconAnchor = new GPoint(16, 32);
                specialIcon.infoWindowAnchor = new GPoint(16, 8);
                specialIcon.image = "assets/skiier.png";
                specialIcon.shadow = "assets/skiier-shadow.png";
              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 html = markers[i].getAttribute("html");
                var label = markers[i].getAttribute("label");
                // create the marker
                var marker = createMarker(point,label,html,specialIcon, 0);
                map.addOverlay(marker);
              }
              // put the assembled side_bar_html contents into the side_bar div
              document.getElementById(Ctgry[0].List).innerHTML = Ctgry[0].Nav;
              //alert(Ctgry[0].Panel)
            }
          }
          resortsrequest.send(null);
          
          // Read the data from example.xml
          var lodgingrequest = GXmlHttp.create();
          lodgingrequest.open("GET", "xml/lodging.xml", true);
          lodgingrequest.onreadystatechange = function() {
            if (lodgingrequest.readyState == 4) {
              var xmlDoc = GXml.parse(lodgingrequest.responseText);
              // obtain the array of markers and loop through it
              var markers = xmlDoc.documentElement.getElementsByTagName("marker");
              
                var specialIcon = new GIcon();
                specialIcon.iconSize = new GSize(32, 32);
                specialIcon.shadowSize = new GSize(59, 32);
                specialIcon.iconAnchor = new GPoint(16, 32);
                specialIcon.infoWindowAnchor = new GPoint(16, 8);
                specialIcon.image = "assets/lodging.png";
                specialIcon.shadow = "assets/lodging_shadow.png";
              
              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 html = markers[i].getAttribute("html");
                var label = markers[i].getAttribute("label");
                // create the marker
                var marker = createMarker(point,label,html,specialIcon,1);
                map.addOverlay(marker);
                marker.hide();
              }
              // put the assembled side_bar_html contents into the side_bar div
              document.getElementById(Ctgry[1].List).innerHTML = Ctgry[1].Nav;
            }
          }
          lodgingrequest.send(null);

          // Read the data from example.xml
          var foodrequest = GXmlHttp.create();
          foodrequest.open("GET", "xml/resturauntloc.xml", true);
          foodrequest.onreadystatechange = function() {
            if (foodrequest.readyState == 4) {
              var xmlDoc = GXml.parse(foodrequest.responseText);
              // obtain the array of markers and loop through it
              var markers = xmlDoc.documentElement.getElementsByTagName("marker");
              
                var specialIcon = new GIcon();
                specialIcon.iconSize = new GSize(32, 32);
                specialIcon.shadowSize = new GSize(59, 32);
                specialIcon.iconAnchor = new GPoint(16, 32);
                specialIcon.infoWindowAnchor = new GPoint(16, 8);
                specialIcon.image = "assets/restaurant.png";
                specialIcon.shadow = "assets/restaurant_shadow.png";
              
              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 html = markers[i].getAttribute("html");
                var label = markers[i].getAttribute("label");
                // create the marker
                var marker = createMarker(point,label,html,specialIcon, 2);
                map.addOverlay(marker);
                marker.hide();
              }
              // put the assembled side_bar_html contents into the side_bar div
              document.getElementById(Ctgry[2].List).innerHTML = Ctgry[2].Nav;
            }
          }
          foodrequest.send(null);
          
        /*
        GEvent.addListener(map,"click", function(overlay,latlng) {
                  if (overlay) {
                    // ignore if we click on the info window
                    return;
                  }
                  var tileCoordinate = new GPoint();
                  var tilePoint = new GPoint();
                  var currentProjection = G_NORMAL_MAP.getProjection();
                  tilePoint = currentProjection.fromLatLngToPixel(latlng, map.getZoom());
                  tileCoordinate.x = Math.floor(tilePoint.x / 256);
                  tileCoordinate.y = Math.floor(tilePoint.y / 256);
                  var myHtml = "Latitude: " + latlng.lat() + "<br/>Longitude: " + latlng.lng() + 
                    "<br/>The Tile Coordinate is:<br/> x: " + tileCoordinate.x + 
                    "<br/> y: " + tileCoordinate.y + "<br/> at zoom level " + map.getZoom();	
                  map.openInfoWindow(latlng, myHtml);
                });*/
          show(0);

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


    

        function createMarkerCategory(name, centerpiont, zoom, panel, list, nav)
        {
            var MC = new MarkerCategory(name, centerpiont, zoom, panel, list, nav);
            Ctgry.push(MC);
        }
        
        
        function createMarker(point,name,html, specialIcon, catidx) {
            markerOptions = { icon:specialIcon, title:name };
            InfoOffset = new GSize(-100, 100);
            var marker = new GMarker(point, markerOptions);
            //alert(Ctgry[catidx].Name);
            marker.mycategory = Ctgry[catidx].Name;                                 
            
        // The info window version with the "to here" form open
        //to_htmls[i] = html + '<br>Directions: <b><font color="blue">To here</font></b> - <a href="javascript:fromhere(' + i + ')"><font color="blue">From here</font></a>' +
        //   '<br>Start address:<form action="javascript:getDirections()">' +
        //   '<input type="text" SIZE=40 MAXLENGTH=40 name="saddr" id="saddr" value="" /><br>' +
        //   '<INPUT value="Get Directions" TYPE="SUBMIT">' +
        //   '<input type="hidden" id="daddr" value="'+name+"@"+ point.lat() + ',' + point.lng() + 
        //   '"/>';
        
        // The info window version with the "to here" form open
        //from_htmls[i] = html + '<br>Directions: <a href="javascript:tohere(' + i + ')"><font color="blue">To here</font></a> - <b><font color="blue">From here</font></b>' +
        //   '<br>End address:<form action="javascript:getDirections()">' +
        //   '<input type="text" SIZE=40 MAXLENGTH=40 name="daddr" id="daddr" value="" /><br>' +
        //   '<INPUT value="Get Directions" TYPE="SUBMIT">' +
        //   '<input type="hidden" id="saddr" value="'+name+"@"+ point.lat() + ',' + point.lng() +
        //   '"/>';
        
        // The inactive version of the direction info
        //html = html + '<br>Directions: <a href="javascript:tohere('+i+')"><font color="blue">To here</font></a> - <a href="javascript:fromhere('+i+')"><font color="blue">From here</font></a>';

        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });
        // save the info we need to use later for the side_bar
        gmarkers[mi] = marker;
        htmls[mi] = html;
        // add a line to the side_bar html
        Ctgry[catidx].Nav += '<a href="javascript:myclick(' + mi + ')">' + name + '</a><br>';
        mi++;
        return marker;
      }
      
      
      
                  function show(catindx) 
                  {
                    map.closeInfoWindow();
                    hideall();
                    gotomap(Ctgry[catindx].Center, Ctgry[catindx].Zoom);
                    for (var i=0; i<gmarkers.length; i++) {
                        if (gmarkers[i].mycategory == Ctgry[catindx].Name) {
                            gmarkers[i].show();
                        }
                    }
                    var showpanel = document.getElementById(Ctgry[catindx].Panel);
                    showpanel.style.display="block";

                    // == check the checkbox ==
                    //document.getElementById(category+"box").checked = true;
                  }     
                  // == hides all markers of a particular category, and ensures the checkbox is cleared ==
                  function hide(catindx) {
                    for (var i=0; i<gmarkers.length; i++) {
                        if (gmarkers[i].mycategory == Ctgry[catindx].Name) {
                            gmarkers[i].hide();
                        }
                    }
                    var hidepanel = document.getElementById(Ctgry[catindx].Panel);
                    hidepanel.style.display="none";
                    // == clear the checkbox ==
                    //document.getElementById(category+"box").checked = false;
                    // == close the info window, in case its open on a marker that we just hid
                    //map.closeInfoWindow();
                  }  

                

                  
                function hideall()
                {
                    len = Ctgry.length;
                    for (var i=0; i<len; i++) {
                        hide(i);
                    }                   
                }      
                
                function gotomap(latlong, zoom)
                {
                    if(map.getZoom()!=zoom)
                    {
                        map.setZoom(zoom)
                    }
                    map.panTo(latlong);
                }
      function myclick(i) {
        gmarkers[i].openInfoWindowHtml(htmls[i]);
      }