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

    // Set up the map and the local searcher.
    function OnLoad() {

      gSearchForm = new GSearchForm(false, document.getElementById("searchform"));
      gSearchForm.setOnSubmitCallback(null, CaptureForm);
      gSearchForm.input.focus();
	 	
      // Initialize the map
      gMap = new GMap(document.getElementById("map"));
      gMap.addControl(new GLargeMapControl());
	  gMap.addControl(new GMapTypeControl(), new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(10, 10)));
	  gMap.addControl(new GScaleControl());
	  gMap.addControl(new GOverviewMapControl());
	  var location = new GLatLng(centerLatitude, centerLongitude);
	  gMap.setCenter(location, startZoom);

      // Initialize the local searcher
      gLocalSearch = new GlocalSearch();
      gLocalSearch.setCenterPoint(gMap);
      gLocalSearch.setSearchCompleteCallback(null, OnLocalSearch);
	  
	  retrieveMarkers();
	  
	  GEvent.addListener(gMap, "click", function(overlay, latlng) 
	  {		
		//create an HTML DOM form element
		var inputForm = document.createElement("form");
		inputForm.setAttribute("action","");
		inputForm.onsubmit = function() {storeMarker(); return false;};
		
		//retrieve the longitude and lattitude of the click point
		lng = latlng.lng();
		lat = latlng.lat();
		
		inputForm.innerHTML = '<fieldset style="width:180px;">'
		+ '<legend>Rollercoaster park</legend>'
		+ '<label for="parknaam">Parknaam</label>'
		+ '<input type="text" id="parknaam" style="width:90%;"/>'
		+ '<label for="website">Website park</label>'
		+ '<input type="text" id="website" style="width:90%;"/>'
		+ '<input type="submit" value="Opslaan"/>'
		+ '<input type="hidden" id="longitude" value="' + lng + '"/>'
		+ '<input type="hidden" id="latitude" value="' + lat + '"/>'
		+ '</fieldset>';
		gMap.openInfoWindow (latlng,inputForm);
	  });

    }
	
	function storeMarker()
	{
		var lng = document.getElementById("longitude").value;
		var lat = document.getElementById("latitude").value;
		var getVars =  "?parknaam=" + document.getElementById("parknaam").value
		+ "&website=" + document.getElementById("website").value
		+ "&lng=" + lng
		+ "&lat=" + lat ;
		
		var request = GXmlHttp.create();
		
		//open the request to storeMarker.php on your server
		request.open('GET', 'storeMarker.php' + getVars, true);
		request.onreadystatechange = function() {
		if (request.readyState == 4) 
		{
			//the request is complete
			var xmlDoc = request.responseXML;

			//retrieve the root document element (response)
			var responseNode = xmlDoc.documentElement;
			
			//retrieve the type attribute of the node
			var type = responseNode.getAttribute("type");
			
			//retrieve the content of the responseNode
			var content = responseNode.firstChild.nodeValue;
			
			//check to see if it was an error or success
			if(type!='success') 
			{
				alert(content);
			} 
			else 
			{
				//create anew marker and add its info window
				var latlng = new GLatLng(parseFloat(lat),parseFloat(lng))
				var marker = createMarker(latlng, content);
				gMap.addOverlay(marker);
				gMap.closeInfoWindow();
			}
		}
		}
		request.send(null);
		return false;
	}

	function createMarker(latlng, html) 
	{
		var marker = new GMarker(latlng);
		
		GEvent.addListener(marker, 'click', function() {
		var markerHTML = html;
		marker.openInfoWindowHtml(markerHTML);
		});
		
		return marker;
	}
	
	function retrieveMarkers()
	{
		// Download the data from retrieveMarkers.php and load it on the map. The format we
		// expect is:
		// <markers>
		//   <marker lat="37.441" lng="-122.141"/>
		//   <marker lat="37.322" lng="-121.213"/>
		// </markers>
		GDownloadUrl("retrieveMarkers.php", function(data) {
		  var xml = GXml.parse(data);
		  var markers = xml.documentElement.getElementsByTagName("marker");
		  for (var i = 0; i < markers.length; i++) {
			var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
									parseFloat(markers[i].getAttribute("lng")));
			
			var html = '<div><b>Parknaam: </b>'
			+ markers[i].getAttribute("parknaam")
			+ '</div><div><b>Website park:</b> <a href="'
			+ markers[i].getAttribute("website")
			+ '" target="_blank">'
			+ markers[i].getAttribute("website")
			+ '</a></div>';
			var marker = createMarker(point, html);
			gMap.addOverlay(marker);					
		  }
		});
	}

    // Called when Local Search results are returned, we clear the old
    // results and load the new ones.
    function OnLocalSearch() {
      if (!gLocalSearch.results) return;
      var searchWell = document.getElementById("searchwell");
	
      // Clear the map and the old search well
      searchWell.innerHTML = "";
      for (var i = 0; i < gCurrentResults.length; i++) {
        if (!gCurrentResults[i].selected()) {
          gMap.removeOverlay(gCurrentResults[i].marker());
        }
      }
	
      gCurrentResults = [];
      for (var i = 0; i < gLocalSearch.results.length; i++) {
        gCurrentResults.push(new LocalResult(gLocalSearch.results[i]));
      }
	  
      var attribution = gLocalSearch.getAttribution();
      if (attribution) {
        document.getElementById("searchwell").appendChild(attribution);
      }

      // move the map to the first result
      var first = gLocalSearch.results[0];
      gMap.recenterOrPanToLatLng(new GPoint(parseFloat(first.lng), parseFloat(first.lat)));

    }

    // Cancel the form submission, executing an AJAX Search API search.
    function CaptureForm(searchForm) {
      gLocalSearch.execute(searchForm.input.value);
      return false;
    }



    // A class representing a single Local Search result returned by the
    // Google AJAX Search API.
    function LocalResult(result) {
      this.result_ = result;
      this.resultNode_ = this.unselectedHtml();
      //document.getElementById("searchwell").appendChild(this.resultNode_);
      gMap.addOverlay(this.marker(gSmallIcon));
    }

    // Returns the GMap marker for this result, creating it with the given
    // icon if it has not already been created.
    LocalResult.prototype.marker = function(opt_icon) {
      if (this.marker_) return this.marker_;
      var marker = new GMarker(new GLatLng(parseFloat(this.result_.lat),
                                         parseFloat(this.result_.lng)),
                               opt_icon);
      GEvent.bind(marker, "click", this, function() {	 	  
        marker.openInfoWindow(this.selected() ? this.selectedHtml() :
                                                this.unselectedHtml());	
      });
      this.marker_ = marker;
      return marker;
    }

    // Returns the HTML we display for a result before it has been "saved"
    LocalResult.prototype.unselectedHtml = function() {
      var container = document.createElement("div");
      container.className = "unselected";
      container.appendChild(this.result_.html.cloneNode(true));
      return container;
    }

    // Returns the HTML we display for a result after it has been "saved"
    LocalResult.prototype.selectedHtml = function() {
      return this.result_.html.cloneNode(true);
    }

    // Returns true if this result is currently "saved"
    LocalResult.prototype.selected = function() {
      return this.selected_;
    }

    GSearch.setOnLoadCallback(OnLoad);
    //]]>