if (GBrowserIsCompatible()) {
	   var select_html = '<select onChange="handleSelected(this)">' +
                        '<option selected> === 選択 === <\/option>'; // ★
      var gmarkers = [];
      var gicons = [];
      var html = [];
      var icon1 = [];
icon1.image = "./image/chateau.png";
icon1.shadow = "./image/shadow.png";
icon1.iconSize = new GSize(33 , 34);
icon1.shadowSize = new GSize(51, 34);
icon1.iconAnchor = new GPoint(12, 34);
icon1.infoWindowAnchor = new GPoint(12, 34);

var icon2 = [];
icon2.image = "./image/musee.png";
icon2.shadow = "./image/shadow.png";
icon2.iconSize = new GSize(33 , 34);
icon2.shadowSize = new GSize(51, 34);
icon2.iconAnchor = new GPoint(12, 34);
icon2.infoWindowAnchor = new GPoint(12, 34);

var icon3 = [];
icon3.image = "./image/jardin.png";
icon3.shadow = "./image/shadow.png";
icon3.iconSize = new GSize(33 , 34);
icon3.shadowSize = new GSize(51, 34);
icon3.iconAnchor = new GPoint(12, 34);
icon3.infoWindowAnchor = new GPoint(12, 34);

var icon4 = [];
icon4.image = "./image/curiosite.png";
icon4.shadow = "./image/shadow.png";
icon4.iconSize = new GSize(33 , 34);
icon4.shadowSize = new GSize(51, 34);
icon4.iconAnchor = new GPoint(12, 34);
icon4.infoWindowAnchor = new GPoint(12, 34);

var icon5 = [];
icon5.image = "./image/spectacle.png";
icon5.shadow = "./image/shadow.png";
icon5.iconSize = new GSize(33 , 34);
icon5.shadowSize = new GSize(51, 34);
icon5.iconAnchor = new GPoint(12, 34);
icon5.infoWindowAnchor = new GPoint(12, 34);

var icon6 = [];
icon6.image = "./image/balade.png";
icon6.shadow = "./image/shadow.png";
icon6.iconSize = new GSize(33 , 34);
icon6.shadowSize = new GSize(51, 34);
icon6.iconAnchor = new GPoint(12, 34);
icon6.infoWindowAnchor = new GPoint(12, 34);

var icon7 = [];
icon7.image = "./image/sport.png";
icon7.shadow = "./image/shadow.png";
icon7.iconSize = new GSize(33 , 34);
icon7.shadowSize = new GSize(51, 34);
icon7.iconAnchor = new GPoint(12, 34);
icon7.infoWindowAnchor = new GPoint(12, 34);

var icon8 = [];
icon8.image = "./image/parc.png";
icon8.shadow = "./image/shadow.png";
icon8.iconSize = new GSize(33 , 34);
icon8.shadowSize = new GSize(51, 34);
icon8.iconAnchor = new GPoint(12, 34);
icon8.infoWindowAnchor = new GPoint(12, 34);

var icon9 = [];
icon9.image = "./image/cave.png";
icon9.shadow = "./image/shadow.png";
icon9.iconSize = new GSize(33 , 34);
icon9.shadowSize = new GSize(51, 34);
icon9.iconAnchor = new GPoint(12, 34);
icon9.infoWindowAnchor = new GPoint(12, 34);

var icon10 = [];
icon10.image = "./image/restaurant.png";
icon10.shadow = "./image/shadow.png";
icon10.iconSize = new GSize(33 , 34);
icon10.shadowSize = new GSize(51, 34);
icon10.iconAnchor = new GPoint(12, 34);
icon10.infoWindowAnchor = new GPoint(12, 34);

var icon11 = [];
icon11.image = "./image/dormir.png";
icon11.shadow = "./image/shadow.png";
icon11.iconSize = new GSize(33 , 34);
icon11.shadowSize = new GSize(51, 34);
icon11.iconAnchor = new GPoint(12, 34);
icon11.infoWindowAnchor = new GPoint(12, 34);

      gicons["chateau"] = new GIcon(icon1,"./image/chateau.png");
      gicons["musee"] = new GIcon(icon2,"./image/musee.png");
      gicons["jardin"] = new GIcon(icon3,"./image/jardin.png")
	  gicons["curiosite"] = new GIcon(icon4,"./image/curiosite.png");
	  gicons["spectacle"] = new GIcon(icon5,"./image/spectacle.png");
      gicons["balade"] = new GIcon(icon6,"./image/balade.png");
	  gicons["sport"] = new GIcon(icon7,"./image/sport.png");
	  gicons["parc"] = new GIcon(icon8,"./image/parc.png");
      gicons["cave"] = new GIcon(icon9,"./image/cave.png");
	  gicons["restaurant"] = new GIcon(icon10,"./image/restaurant.png");
	  gicons["dormir"] = new GIcon(icon11,"./image/dormir.png");
	  

      // A function to create the marker and set up the event window
      function createMarker(point,name,html,category) {
        var marker = new GMarker(point,gicons[category]);
        // === Store the category and name info as a marker properties ===
        marker.mycategory = category;                                 
        marker.myname = name;
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });
	
        gmarkers.push(marker);
        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();
      }

      function myclick(i) {
        GEvent.trigger(gmarkers[i],"click");
      }
      //zoom-in Function
      function Adentro(i) { 
        map.setCenter(gmarkers[i].point,14);
      }
      //zoom-out Function
      function Fuera() { 
        map.setCenter(new GLatLng(47.40392636603371, 0.9063720703125),9);
      } 
      


      // == rebuilds the sidebar to match the markers currently displayed ==
      function makeSidebar() {
        var html = "";
        for (var i=0; i<gmarkers.length; i++) {
          if (!gmarkers[i].isHidden()) {
            html += '<a href="javascript:myclick(' + i + ')">' + gmarkers[i].myname + '</a><br>';
          }
        }
        document.getElementById("side_bar").innerHTML = html;
      }


      // create the map
      var map = new GMap2(document.getElementById("map"));
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      
      map.setCenter(new GLatLng(47.40392636603371, 0.9063720703125),9);
      map.enableDoubleClickZoom();
      map.enableContinuousZoom();

 // Read the data
      GDownloadUrl("passmap.xml", function(doc) {
        var xmlDoc = GXml.parse(doc);
        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 html = markers[i].getAttribute("html");
	  var category = markers[i].getAttribute("category");
          // create the marker
          var marker = createMarker(point,name,html,category);
          map.addOverlay(marker);
        }
        // == show or hide the categories initially ==
        show("chateau");
        hide("musee");
        hide("jardin");
	hide("curiosite");
        hide("spectacle");		
	hide("balade");
        hide("sport");
	hide("parc");
        hide("cave");
	hide("restaurant");
	hide("dormir");
		
		// == create the initial sidebar ==
        makeSidebar();
      });
    }

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