// This function replaces the standard Google Maps marker with smaller icons in various colors, using an associative array.
	// It also adds a sidebar to the map, listing all of the markers.
	// First, create our "tiny" marker icon. Start by defining "red"... 
var icons = new Array();
icons["red"] = new GIcon(); 
icons["red"].image = "http://labs.google.com/ridefinder/images/mm_20_red.png"; 
icons["red"].shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png"; 
icons["red"].iconSize = new GSize(12, 20); 
icons["red"].shadowSize = new GSize(22, 20); 
icons["red"].iconAnchor = new GPoint(6, 20); 
icons["red"].infoWindowAnchor = new GPoint(5, 1); 
icons["red"].imageMap = [4,0,0,4,0,7,3,11,4,19,7,19,8,11,11,7,11,4,7,0]; 
icons["red"].transparent = "mapIcons/mm_20_transparent.png";

function get_icon(iconColor) { // red is the default if color is undefined or empty
   if ((typeof(iconColor)=="undefined") || (iconColor==null)) { 
      iconColor = "red"; 
   }
   if (!icons[iconColor]) {
      icons[iconColor] = new GIcon(icons["red"]);
      icons[iconColor].image = "http://labs.google.com/ridefinder/images/mm_20_"+ iconColor +".png";
   } 
   return icons[iconColor];
}


	// This function picks up the click in the sidebar and opens the corresponding info window, or opens a new browser window.
	// The myclick() function must be loaded ahead of the createMarker() function.
	// If the variable markerClickAction (defined prior to loading) is "nextpage", then clicking on a marker will send the user to another webpage.
	// If not equal to "nextpage", then the function opens an infowindow instead.
function myclick(i) {
 	if (markerClickAction == "nextpage") {
 	window.open(webpages[i]);
 	} else {
 	gmarkers[i].openInfoWindowHtml(htmls[i]);
  	}
}

	// A function to create the marker with a tooltip and specified icon color.  Then it adds the sidebar contents.  Both marker and sidebar have onmouseover events that change the icon.
function createMarker(point,label,html,iconStr,webpage) {
        html = '<div style="white-space:normal;">' + html + '<\/div>';  //Changed from the example, which used white-space:nowrap
        webpages[i] = webpage;
        
        // === marker with tooltip and specified icon color ===================
        var marker = new GMarker(point, {title:label, icon:get_icon(iconStr)});
        // ====================================================================
        
        // Onclick event handler opens an info window
        GEvent.addListener(marker, "click", function() {
			if (markerClickAction == "nextpage") {        
        		window.open(webpage);
        	} else {	
          	marker.openInfoWindowHtml(html);
          	}
        });
        
        // Switch icon on marker mouseover and mouseout events      
        // First declare the variable used as the marker for the onmouseover event.  It must be located above and outside the event listener, because it is also used by the sidebar
        var mouseoverMarker = "http://www.google.com/mapfiles/marker.png";        
        GEvent.addListener(marker, "mouseover", function() {
          	marker.setImage(mouseoverMarker);
        });        
        GEvent.addListener(marker, "mouseout", function() {
        	// determine the color of the original icon from data contained in the XML file, and assign the URL to a variable
            var mouseoutMarker = "http://labs.google.com/ridefinder/images/mm_20_"+ iconStr +".png";
          	marker.setImage(mouseoutMarker);
        });
        
       	gmarkers[i] = marker;  // required for the myclick() function
        htmls[i] = html;       // required for the myclick() function        
      	// populate the sidebar with the data in the 'label' attribute. Clicking will activate the myclick() function. Mouseovers cause the marker on the map to change, and mouseouts bring back the original marker.
        side_bar_html += '<a href="javascript:myclick(' + i + ')" onmouseover="gmarkers['+i+'].setImage(\''+ mouseoverMarker +'\')" onmouseout="gmarkers['+i+'].setImage(\'http://labs.google.com/ridefinder/images/mm_20_'+ iconStr +'.png\')">' + label + '<\/a><br>';
        i++;
        return marker;
}