var markerOptions = [];	  
var icon = new GIcon();

      icon.shadow = "http://www.google.com/mapfiles/shadow50.png";
      icon.iconSize = new GSize(50, 49);
      icon.shadowSize = new GSize(70, 49);
      icon.iconAnchor = new GPoint(25, 49);

      icon.infoWindowAnchor = new GPoint(21, 8);
	  
var cIcon = new GIcon(icon);
cIcon.image = 'http://www.hooplah.ca/images/150ferrandDrive_hooplahHQ.png';
//cIcon.iconSize = new GSize(32, 22);

   var markerIcon = new GIcon(icon);
   markerIcon.image = "http://www.myarea.ca/dev/images/1.png";
   
   markerOptions[1] = { draggable: false, icon: markerIcon }; 
   markerOptions[2] = { draggable: false, icon: cIcon }; 
//<![CDATA[
  if (GBrowserIsCompatible()) {
      var side_bar_html = "";
      var gmarkers = [];
      var pmarkers = [];
      var htmls = [];
      var i = 0;
	  var p = 0;
      var fillColor = "#aacc37"; // blue fill
      var lineColor = "#886600"; // black line
      var opacity = .5;
      var lineWeight = 1;
      var kmlFillColor = "7dff0000"; // half-opaque blue fill	
      var polygonDepth = "0";

      function createMarker(point,name,html, markerType, image, index) {
//        k = markerList[i][1];
		var marker = new GMarker(point, markerOptions[2]);	  
//        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() {
//          map.closeInfoWindow();
          marker.openInfoWindowHtml('<table height="100" width="155" border="0" cellspacing="0">\
  <tr>\
    <td><img src="images/maplogo.jpg" alt="Hooplah" /></td>\
  </tr>\
  <tr>\
    <td><strong>Corporate Headquarters</strong><br />\
150 Ferrand Drive, Suite 804<br />\
Toronto, ON M3C 3E5 Canada</td>\
  </tr>\
  <tr>\
    <td><a href="http://maps.google.ca/maps?q=150+Ferrand+Dr,+Toronto,+Toronto+Division,+Ontario&ie=UTF8&oe=utf-8&client=firefox-a&hl=en&cd=1&geocode=FbUgmwIdS3tF-w&sll=49.891235,-97.15369&sspn=16.71875,56.536561&z=16&g=150+Ferrand+Dr,+Toronto,+Toronto+Division,+Ontario&iwloc=addr" target="_blank">Get Directions </a></td>\
  </tr>\
</table>');
        });
        gmarkers[i] = marker;
//        htmls[i] = html;
         i++;

//        clusterer.AddMarker(marker, name, index)		
        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"
        });        */
      }

      // ====== 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 = "<div class='tooltip'><nobr>"+html+"</nobr></div>";
	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 resetMap() {
        map.setCenter(new GLatLng(43.730467, -79.333305), 13);
      }

      // create the map
      var map = new GMap2(document.getElementById("map_canvas"));

      map.addControl(new GSmallMapControl());
//      map.addControl(new GMapTypeControl());<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.ca/maps?q=150+Ferrand+Dr,+Toronto,+Toronto+Division,+Ontario&amp;ie=UTF8&amp;oe=utf-8&amp;client=firefox-a&amp;hl=en&amp;cd=1&amp;geocode=FbUgmwIdS3tF-w&amp;sll=49.891235,-97.15369&amp;sspn=16.71875,56.536561&amp;z=14&amp;g=150+Ferrand+Dr,+Toronto,+Toronto+Division,+Ontario&amp;ll=43.729677,-79.328327&amp;output=embed&amp;s=AARTsJqC1icKM26Ze-vtYFORWkN3u0lnsQ"></iframe><br /><small><a href="http://maps.google.ca/maps?q=150+Ferrand+Dr,+Toronto,+Toronto+Division,+Ontario&amp;ie=UTF8&amp;oe=utf-8&amp;client=firefox-a&amp;hl=en&amp;cd=1&amp;geocode=FbUgmwIdS3tF-w&amp;sll=49.891235,-97.15369&amp;sspn=16.71875,56.536561&amp;z=14&amp;g=150+Ferrand+Dr,+Toronto,+Toronto+Division,+Ontario&amp;ll=43.729677,-79.328327&amp;source=embed" style="color:#0000FF;text-align:left">View Larger Map</a></small>

      map.setCenter(new GLatLng(43.730467, -79.333305), 13);
	  map.setMapType(G_HYBRID_MAP);
      var marker = createMarker(new GLatLng(43.719467, -79.333305), "", "");
	  
/*    for(m=0; m < allAreas.length; m++)
    {
          pmarkers[m] = new GLatLng(allAreas[m][3], allAreas[m][4]);	
          polygonList[m] = new GPolygon(allAreas[m][0],lineColor,lineWeight,opacity,fillColor,opacity);
		  map.addOverlay(polygonList[m]);		  
    }  	*/
/*	 for(var j=0; j<markerList.length; j++)
	 {			 
//       this.map.addOverlay(new GMarker(point))	
        k = markerList[j][1];
        var marker = createMarker(markerList[j][0], j, j);
//  	    alert(markerList[j][0]);		
//		marker = new GMarker(markerList[i][0], markerOptions[k]);
//        clusterer.AddMarker(marker, "hi")
//        map.addOverlay(marker);
//        marker.setImage("turkey.png");			
	 }	*/
	 
/*      GPolygon.prototype.Contains = function(point) {
        var j=0;
        var oddNodes = false;
        var x = point.lng();
        var y = point.lat();
        for (var i=0; i < this.getVertexCount(); i++) {
          j++;
          if (j == this.getVertexCount()) {j = 0;}
          if (((this.getVertex(i).lat() < y) && (this.getVertex(j).lat() >= y))
          || ((this.getVertex(j).lat() < y) && (this.getVertex(i).lat() >= y))) {
            if ( this.getVertex(i).lng() + (y - this.getVertex(i).lat())
            /  (this.getVertex(j).lat()-this.getVertex(i).lat())
            *  (this.getVertex(j).lng() - this.getVertex(i).lng())<x ) {
              oddNodes = !oddNodes
            }
          }
        }
        return oddNodes;
      }

      GPolyline.prototype.Contains = GPolygon.prototype.Contains;
	  	  	 
      GEvent.addListener(map, "mousemove", function (p) {
//		var hoverinfo = document.getElementById('hoverInfo');
	    var offset=map.getCurrentMapType().getProjection().fromLatLngToPixel(p,map.getZoom());			
        for (n=0; n<allAreas.length;n++ )
		{
          if (polygonList[n].Contains(p)) {
            showTooltip2(new GLatLng(allAreas[n][3], allAreas[n][4]),allAreas[n][1])		  
//          document.onmousemove=mousePos; 		
// 		  hoverinfo.style.top = (posY-200)+"px";
//		  hoverinfo.style.left = (posX-600)+"px";		    
//	      hoverinfo.innerHTML = allAreas[i][1];

//		  alert(allAreas[n][3]+','+allAreas[n][4])
//		  hoverinfo.style.display = "";
		  return;
		  }
		}
	tooltip.style.visibility="hidden";		
//    	  hoverinfo.style.display = "none";  
      });

      GEvent.addListener(map, "click", function(overlay,point) {
//      GEvent.addListener(map, "mousemove", function (point) {	  
      if (point)
        for (n=0; n<allAreas.length;n++ )
		{
           if (polygonList[n].Contains(point)) { window.location = 'http://www.myarea.ca/'+ replaceChars(allAreas[n][1]); }
       }
     }); 
	 
	 
      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>");  
      }
	  	 
      // ====== set up marker mouseover tooltip div ======
      var tooltip = document.createElement("div");
      map.getPane(G_MAP_FLOAT_PANE).appendChild(tooltip);
      tooltip.style.visibility="hidden";*/

    }

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

    //]]>