//<![CDATA[

    if (GBrowserIsCompatible()) {
      var side_bar_html = "";
      var gmarkers = [];
      var htmls = [];
      var ii = 0;

      // === Create an associative array of GIcons() ===
      var gicons = [];
//      gicons["embassy"] = new GIcon(G_DEFAULT_ICON, "http://maps.google.com/mapfiles/ms/micons/red.png");
//      gicons["consulate"] = new GIcon(G_DEFAULT_ICON, "http://maps.google.com/mapfiles/ms/micons/blue.png");
      gicons["embassy"] = new GIcon(G_DEFAULT_ICON);
      gicons["embassy"].image = "http://maps.google.com/mapfiles/ms/micons/red.png";
      gicons["embassy"].iconSize = new GSize(32,32);
      gicons["consulate"] = new GIcon(G_DEFAULT_ICON);
      gicons["consulate"].image = "http://maps.google.com/mapfiles/ms/micons/blue.png";
      gicons["consulate"].iconSize = new GSize(32,32);

      // A function to create the marker and set up the event window
      function createMarker(point,name,html,icontype) {
        var marker = new GMarker(point, gicons[icontype]);
        marker.mycategory = icontype;                                 
        
        //GEvent.addListener(marker, "mouseover", function() {
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });
        gmarkers[ii] = marker;
        htmls[ii] = html;
        side_bar_html += '<a href="javascript:myclick(' + ii + ')">' + name + '</a><br>';
        ii++;
        return marker;
      }


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

      // == a checkbox has been clicked ==
      function boxclick(box,category) {
        if (box.checked) {
          show(category);
        } else {
          hide(category);
        }
        // == rebuild the side bar
        makeSidebar();
      }

      // This function picks up the click and opens the corresponding info window
      function myclick(i) {
        gmarkers[i].openInfoWindowHtml(htmls[i]);
      }


      // create the map
      var map = new GMap2(document.getElementById("map"));
      // Get the list of map types      
      var mt = map.getMapTypes();
      
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      map.setCenter(new GLatLng( 16.63619,4.21875), 2);


      // A function to read the data
      function readMap(url) {
        var request = GXmlHttp.create();
        request.open("GET", url, true);
        request.onreadystatechange = function() {
          if (request.readyState == 4) {
            var xmlDoc = GXml.parse(request.responseText);
            // obtain the array of markers and loop through it
            var markers = xmlDoc.documentElement.getElementsByTagName("marker");
            
            // hide the info window, otherwise it still stays open where the removed marker used to be
            map.getInfoWindow().hide();
            
            map.clearOverlays();            
            
            // empty the arrays
            gmarkers = [];
            htmls = [];
            ii = 0;

            // reset the side_bar
            side_bar_html="";
          
            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");
            var icontype = markers[i].getAttribute("icontype");
              
              // create the marker
              var marker = createMarker(point,label,html,icontype);
              map.addOverlay(marker);
            }
            // put the assembled side_bar_html contents into the side_bar div
//            document.getElementById("side_bar").innerHTML = side_bar_html;
          }
        }
        request.send(null);
      }
      
      // When initially loaded, use the data from "xml/chinese-embassies-markers.xml"
      readMap("xml/chinese-embassies-markers.xml");
      
    }

    else {
      alert("Sorry, the Google Maps API is not compatible with this browser");
    }
    // This Javascript is based on code provided by the
    // Blackpool Community Church Javascript Team
    // http://www.commchurch.freeserve.co.uk/   
    // http://econym.googlepages.com/index.htm

    //]]>