var side_bar_html = "";
      var gmarkers = [];
      var pmarkers = [];
      var htmls = [];
var markerOptions = [];	  
      var i = 0;
	  var p = 0;
      var fillColor = "#aacc37"; // blue fill
      var lineColor = "#003300"; // black line
      var opacity = .5;
      var lineWeight = 1.5;
      var kmlFillColor = "7dff0000"; // half-opaque blue fill	
      var polygonDepth = "0";

      var icon = new GIcon();
      icon.shadow = "http://www.google.com/mapfiles/shadow50.png";
      icon.iconSize = new GSize(15, 18);
      icon.shadowSize = new GSize(25, 18);
      icon.iconAnchor = new GPoint(8, 18);
	  
      var icon2 = new GIcon();
      icon2.shadow = "http://www.google.com/mapfiles/shadow50.png";
      icon2.iconSize = new GSize(9, 16);
      icon2.shadowSize = new GSize(20, 16);
      icon2.iconAnchor = new GPoint(10, 16);	  

      icon.infoWindowAnchor = new GPoint(21, 8);

var cIcon = new GIcon(icon2);
cIcon.image = 'http://www.myarea.ca/images/buildingPin.png';
//cIcon.iconSize = new GSize(32, 22);

   var markerIcon = new GIcon(icon);
   markerIcon.image = "http://www.myarea.ca/images/1.png";
   
   markerOptions[1] = { draggable: false, icon: markerIcon }; 
   markerOptions[2] = { draggable: false, icon: cIcon };    

      // A function to create the marker and set up the event window
      function createMarker(point,name,html) {
        var marker = new GMarker(point);
        // === store the name so that the tooltip function can use it ===
        marker.tooltip = '<div class="tooltip"><nobr>'+name+'</nobr></div>';
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });
        gmarkers[i] = marker;
        htmls[i] = html;
        side_bar_html += '<a href="javascript:myclick(' + i + ')" onmouseover="mymouseover('+i+')" onmouseout="mymouseout()">' + name + '</a><br>';
        i++;
        map.addOverlay(marker);

        //  ======  The new marker "mouseover" and "mouseout" listeners  ======
        GEvent.addListener(marker,"mouseover", function() {
          showTooltip(marker);
        });        
        GEvent.addListener(marker,"mouseout", function() {
		tooltip.style.visibility="hidden"
        });        
      }

      function toolTipTemplate(html)
	  {
	    template = 	  
'<table width="100" border="0" cellspacing="0" cellpadding="0">\
  <tr>\
    <td width="6" height="5"><img class="hover" src="./images/roundedHoverBox/topleftCorner.gif" width="6" height="5"></td>\
    <td bgcolor="#444F49"></td>\
    <td width="6" height="5"><img class="hover" src="./images/roundedHoverBox/topRightCorner.gif" width="6" height="5"></td>\
  </tr> \
  <tr bgcolor="#444F49"> \
    <td></td> \
    <td> ' + html + '</td> \
    <td></td> \
  </tr> \
  <tr> \
    <td width="6" height="5"><img  class="hover" src="./images/roundedHoverBox/bottomleftCorner.gif" width="6" height="5"></td> \
    <td bgcolor="#444F49"></td> \
    <td width="6" height="5"><img  class="hover" src="./images/roundedHoverBox/bottomRightCorner.gif" width="6" height="5"></td> \
  </tr> \
</table> ';
        return template;
	  }
      // ====== This function displays the tooltip ======
      // it can be called from an icon mousover or a side_bar mouseover
    function showTooltip(marker) {
    tooltip.innerHTML = marker.tooltip;
	var point=map.getCurrentMapType().getProjection().fromLatLngToPixel(map.fromDivPixelToLatLng(new GPoint(0,0),true),map.getZoom());
	var offset=map.getCurrentMapType().getProjection().fromLatLngToPixel(marker.getPoint(),map.getZoom());
    var anchor=marker.getIcon().iconAnchor;
	var width=marker.getIcon().iconSize.width;
	var height=tooltip.clientHeight;
	var pos = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(offset.x - point.x - anchor.x + width, offset.y - point.y -anchor.y -height)); 
	pos.apply(tooltip);
	tooltip.style.visibility="visible";
      }
	  
    function showTooltip2(pt,html) {
	tooltip.innerHTML = toolTipTemplate(html); 
	var point=map.getCurrentMapType().getProjection().fromLatLngToPixel(map.fromDivPixelToLatLng(new GPoint(0,0),true),map.getZoom());
	var offset=map.getCurrentMapType().getProjection().fromLatLngToPixel(pt,map.getZoom());
//	var anchor=point.getIcon().iconAnchor;
	var pos = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(offset.x - point.x - 31, offset.y - point.y - 31)); 
	pos.apply(tooltip);
	tooltip.style.visibility="visible";
      }	  

      // ===== This function is invoked when the mouse goes over an entry in the side_bar =====
      // It launches the tooltip on the icon      
      function mymouseover(i) {
        showTooltip(gmarkers[i])
      }
      // ===== This function is invoked when the mouse leaves an entry in the side_bar =====
      // It hides the tooltip      
      function mymouseout() {
	tooltip.style.visibility="hidden";
      }

      // This function picks up the side_bar click and opens the corresponding info window
      function myclick(i) {
        gmarkers[i].openInfoWindowHtml(htmls[i]);
      }	  
	  
      function locateArea(areaIndex) {
//		var hoverinfo = document.getElementById('hoverInfo');
//	    var offset=map.getCurrentMapType().getProjection().fromLatLngToPixel(new GLatLng(allAreas[i][4], allAreas[i][3]),map.getZoom());
		      map.openInfoWindowHtml(new GLatLng(allAreas[areaIndex][3], allAreas[areaIndex][4]), " \
					<div style='width: 249px;'><div class='googlePopLogo'><img src='images/miniLogo.gif' width='99' height='21' alt='myArea.ca' /></div> \
					\
					<div class='googlePopImage'><img src='images/downTownThumb.jpg' width='43' height='32' alt='' /></div> \
					<div class='googlePopContent'>" + allAreas[areaIndex][2] + "</div> \
					\
					<div class='clear'><!--  --></div> \
					<div class='googlePopLinks'><a title='complete profile' href='http://myarea.ca/" + allAreas[areaIndex][1] + "'>complete profile</a> &nbsp;|&nbsp;  <a title='contact us' href='#'>contact us</a> <a title='next' href='#' style='padding-left:10px'><img src='images/icon_next.png' width='21' height='21' alt='next' /></a></div></div>");  
      }