 //<![CDATA[
    if (GBrowserIsCompatible()) {

      var map = new GMap2(document.getElementById("map"));
      var dirn = new GDirections(map);
	  map.addControl(new GMapTypeControl());
		 map.addControl(new GSmallMapControl());

	  var latlng = new GLatLng(44.03674,-79.27085);
      map.setCenter(latlng, 13);
	
     	 // Create our "tiny" marker icon
        var blueIcon = new GIcon(G_DEFAULT_ICON);
		var sizeIcon= new GSize(30,30);
		blueIcon.iconSize=sizeIcon;
        blueIcon.image = "http://www.cedarbeach.com/images/marker.png";
		blueIcon.shadow = "http://www.cedarbeach.com/images/shadow.png";
	  blueIcon.iconSize = new GSize(30, 30);
    blueIcon.shadowSize = new GSize(46.0, 30.0);
	blueIcon.iconAnchor = new GPoint(15.0, 15.0);
    blueIcon.infoWindowAnchor = new GPoint(15.0, 15.0);
	
		// Set up our GMarkerOptions object
		markerOptions = { icon:blueIcon };
		m=new GMarker(latlng, markerOptions)
		map.addOverlay(m);
loadpick();

      GEvent.addListener(dirn,"error", function() {
        alert("Directions Failed: "+dirn.getStatus().code);
      });

    // dirn.load("from: Blackpool to: London to: Blackburn", {getSteps:true});

      
      // ============ custom direction panel ===============
      function customPanel(map,mapname,dirn,div) {
        var html = "";
      
        // ===== local functions =====

        // === waypoint banner ===
        function waypoint(point, type, address,p) {
          var target = '"' + mapname+".showMapBlowup(new GLatLng("+point.toUrlValue(6)+"))"  +'"';
          html += '<table class="directionAddTable">';
          html += '  <tr style="cursor: pointer;" onclick='+target+'>';
          html += '    <td style="padding: 4px 15px 0px 5px; vertical-align: middle; width: 20px;">';
          //html += '      <img src="http://www.google.com/intl/en_ALL/mapfiles/icon-dd-' +type+ '-trans.png">'
		  if(p==-1){
		  html += '      <img src="http://www.cedarbeach.com/images/marker.png">'
		  }
		  else
		  {html += '      <img src="http://www.google.com/intl/en_ALL/mapfiles/icon-dd-' +type+ '-trans.png">'
		  }
          html += '    </td>';
          html += '    <td class="directionsAddress">';
          html +=        address;
          html += '    </td>';
          html += '  </tr>';
          html += '</table>';
        }

        // === route distance ===
        function routeDistance(dist) {
          html += '<div style="text-align: right; padding-bottom: 0.3em;">' + dist + '</div>';
        }      

        // === step detail ===
        function detail(point, num, description, dist) {
          var target = '"' + mapname+".showMapBlowup(new GLatLng("+point.toUrlValue(6)+"))"  +'"';
          html += '<table class="directionDescTable">';
          html += '  <tr style="cursor: pointer;" onclick='+target+'>';
          html += '    <td class="directionLink">';
          html += '      <a href="javascript:void(0)"> '+num+'. </a>';
          html += '    </td>';
          html += '    <td class="directionsDesc">';
          html +=        description;
          html += '    </td>';
          html += '    <td class="directionsDist">';
          html +=        dist;
          html += '    </td>';
          html += '  </tr>';
          html += '</table>';
        }

        // === Copyright tag ===
        function copyright(text) {
          html += '<div style="font-size: 0.86em;">' + text + "</div>";
        }
        

        // === read through the GRoutes and GSteps ===

        for (var i=0; i<dirn.getNumRoutes(); i++) {
          if (i==0) {
            var type="play";
          } else {
            var type="pause";
          }
          var route = dirn.getRoute(i);
          var geocode = route.getStartGeocode();
          var point = route.getStep(0).getLatLng();
          // === Waypoint at the start of each GRoute
          waypoint(point, type, geocode.address,i);
          routeDistance(route.getDistance().html+" (about "+route.getDuration().html+")");

          for (var j=0; j<route.getNumSteps(); j++) {
            var step = route.getStep(j);
            // === detail lines for each step ===
            detail(step.getLatLng(), j+1, step.getDescriptionHtml(), step.getDistance().html);
          }
        }
        
        // === the final destination waypoint ===   
        var geocode = route.getEndGeocode();
        var point = route.getEndLatLng();
        waypoint(point, "stop", geocode.address,-1);
                 
        // === the copyright text ===
        copyright(dirn.getCopyrightsHtml());

        // === drop the whole thing into the target div
        div.innerHTML = html;

      } // ============ end of customPanel function ===========


      // ========== launch the custom Panel creator a millisecond after the GDirections finishes loading ==========
      // == The delay is required in case we rely on GDirections to perform the initial setCenter ==
      GEvent.addListener(dirn,"load", function() {
        setTimeout('customPanel(map,"map",dirn,document.getElementById("path"))', 1);
      });

    }
 function setDirections(fromAddress, toAddress, locale){
	map.removeOverlay(m);
	G_END_ICON.image = "";
	
	    var blueIcon = new GIcon(G_DEFAULT_ICON);
		var sizeIcon= new GSize(30,30);
		blueIcon.iconSize=sizeIcon;
		blueIcon.image = "http://www.cedarbeach.com/images/marker.png";
		blueIcon.shadow = "http://www.cedarbeach.com/images/shadow.png";
		blueIcon.iconSize = new GSize(30.0, 30.0);
	    blueIcon.shadowSize = new GSize(46.0, 30.0);
		blueIcon.iconAnchor = new GPoint(15.0, 15.0);
	    blueIcon.infoWindowAnchor = new GPoint(15.0, 15.0);
		G_END_ICON.image=blueIcon.image;
		G_END_ICON.iconSize= new GSize(30.0, 30.0);
		//alert("from: " + fromAddress + " to: " + toAddress);
		dirn.load("from: " + fromAddress + " to: " + toAddress, {"locale": locale, getSteps:true});
      	
    }