//<![CDATA[

    // Javascript code to utilize the Google Maps API.
    // Adapted by Paul Salisbury from the examples given in the Google Maps API documentation [http://www.google.com/apis/maps/documentation/]
    
    // Version 0.5
    
    // NOTE: It is important to obtain and use your own Google Maps API Key unique to you and your website.
    //       The API key is called from the HTML page before this javascript is loaded. Change it there.
    
    function load() {
      if (GBrowserIsCompatible()) {
    
        // A TextualZoomControl is a GControl that displays textual "Zoom In"
        // and "Zoom Out" buttons (as opposed to the iconic buttons used in
        // Google Maps). In this case the controls zoom into a specific geographic
        // region of the map.
        function TextualZoomControl() {
        }
        TextualZoomControl.prototype = new GControl();
        
        // Creates a one DIV for each of the buttons and places them in a container
        // DIV which is returned as our control element. We add the control to
        // to the map container and return the element for the map class to
        // position properly.
        TextualZoomControl.prototype.initialize = function(map) {
          var container = document.createElement("div");
        
          var EuropeDiv = document.createElement("div");
          this.setButtonStyle_(EuropeDiv);
          container.appendChild(EuropeDiv);
          EuropeDiv.appendChild(document.createTextNode("Europe"));
          GEvent.addDomListener(EuropeDiv, "click", function() {
            map.setCenter(new GLatLng(51.068882,-1.813602), 3, G_HYBRID_MAP);
          });
        
          var PacificDiv = document.createElement("div");
          this.setButtonStyle_(PacificDiv);
          container.appendChild(PacificDiv);
          PacificDiv.appendChild(document.createTextNode("Pacific"));
          GEvent.addDomListener(PacificDiv, "click", function() {
            map.setCenter(new GLatLng(-26.53523,143.789063), 3, G_HYBRID_MAP);
          });
        
          var AsiaDiv = document.createElement("div");
          this.setButtonStyle_(AsiaDiv);
          container.appendChild(AsiaDiv);
          AsiaDiv.appendChild(document.createTextNode("Asia"));
          GEvent.addDomListener(AsiaDiv, "click", function() {
            map.setCenter(new GLatLng(23.53523,118.789063), 3, G_HYBRID_MAP);
          });
        
          var zoomOutDiv = document.createElement("div");
          this.setButtonStyle_(zoomOutDiv);
          container.appendChild(zoomOutDiv);
          zoomOutDiv.appendChild(document.createTextNode("World"));
          GEvent.addDomListener(zoomOutDiv, "click", function() {
            map.setCenter(new GLatLng(30.152221, 10.338345), 1, G_HYBRID_MAP);
          });
        
          map.getContainer().appendChild(container);
          return container;
        }
        
        // By default, the control will appear in the top left corner of the
        // map with 7 pixels of padding.
        TextualZoomControl.prototype.getDefaultPosition = function() {
          return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(7, 7));
        }
        
        // Sets the proper CSS for the given button element.
        TextualZoomControl.prototype.setButtonStyle_ = function(button) {
          button.style.textDecoration = "underline";
          button.style.color = "#0000cc";
          button.style.backgroundColor = "white";
          button.style.font = "small Arial";
          button.style.border = "1px solid black";
          button.style.padding = "2px";
          button.style.marginBottom = "3px";
          button.style.textAlign = "center";
          button.style.width = "6em";
          button.style.cursor = "pointer";
        }

        // Initiate the Map
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(30.152221, 10.338345), 1, G_HYBRID_MAP);
        map.addControl(new GSmallMapControl());
        map.addControl(new TextualZoomControl());

        // Create the "tiny" marker icon
        var icon = new GIcon();
        icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
        icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
        icon.iconSize = new GSize(12, 20);
        icon.shadowSize = new GSize(22, 20);
        icon.iconAnchor = new GPoint(6, 20);
        icon.infoWindowAnchor = new GPoint(5, 1);

        // Creates a marker at the given point with label and html content for the balloon
        function createMarker(point,name,html) {
          var marker = new GMarker(point, icon);
          GEvent.addListener(marker, "click", function() {
            marker.openInfoWindowHtml(html);
          });
          return marker;
        }

        // Function to handle some of the XML parsing we are about to do
        function decode(a) {
          var b = "";
          if (a.length > 0) {
            if (a[0]) {
              if (a[0].firstChild) {
                b = a[0].firstChild.nodeValue;
              }
            }
          }
          return b;
        }
        
        // Read the data from example.xml
        var request = GXmlHttp.create();
        request.open("GET", "mapdata.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 html = decode(markers[i].getElementsByTagName("infowindow"));
              var label = markers[i].getAttribute("label");
              // create the marker by calling the createMarker function
              var marker = createMarker(point,label,html);
              map.addOverlay(marker);
            }
          }
        }
        request.send(null);
      }
    }

    //]]>