google maps directions: function is not correctly defined - google-maps-api-3

Question

i'm having a problem translating the already working directions script in v2 to v3.
the error is the tohere/fromhere function which is not correctly executed.
the marker is displayed correctly, after the first click the infowindow opens.
when i'm then clicking "tohere" or "fromhere" it throws error "tohere is not defined"...
any hints what i'm doing wrong?
jQuery(document).ready(function () {
if (jQuery('#map_canvas').length) {
initActive();
}
function initialize(lat, long,html) {
var latid = lat;
var longit = long;
var myLatlng = new google.maps.LatLng(latid, longit);
//var myLatlng = new google.maps.LatLng(51.512098,-0.137692);
var myOptions = {
zoom:17,
navigationControl:true,
mapTypeControl:false,
scaleControl:false,
scrollwheel:false,
disableDefaultUI:true,
disableDoubleClickZoom:true,
center:myLatlng,
mapTypeId:google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var styles = [
{
stylers:[
{ saturation:-100 }
]
}
];
map.setOptions({styles:styles});
var myLatLng = new google.maps.LatLng(latid, longit);
var marker = createMarker(map,myLatLng,html);
}
function initActive() {
var flat = jQuery('#map_canvas').data('coord-lat');
var flong = jQuery('#map_canvas').data('coord-lon');
var title = jQuery('#map_canvas').data('content');
initialize(flat, flong,title);
}
function createMarker(map, latlng,html) {
var marker = new google.maps.Marker({
position: latlng,
map: map
});
var infowindow = new google.maps.InfoWindow({ size: new google.maps.Size(150,50)});
marker.setIcon("mapIcons/marker_red.png");
var gmarkers = [];
var to_htmls = [];
var from_htmls = [];
var htmls = [];
var i = gmarkers.length;
// The info window version with the "to here" form open
to_htmls[i] = html + '<br>Directions: <b>To here<\/b> - <a href="javascript:fromhere(' + i + ')">From here<\/a>' +
'<br>Start address:<form action="http://maps.google.com/maps" method="get" target="_blank">' +
'<input type="text" SIZE=40 MAXLENGTH=40 name="saddr" id="saddr" value="" /><br>' +
'<INPUT value="Get Directions" TYPE="SUBMIT">' +
'<input type="hidden" name="daddr" value="' + latlng.lat() + ',' + latlng.lng() +
// "(" + name + ")" +
'"/>';
// The info window version with the "to here" form open
from_htmls[i] = html + '<br>Directions: <a href="javascript:tohere(' + i + ')">To here<\/a> - <b>From here<\/b>' +
'<br>End address:<form action="http://maps.google.com/maps" method="get"" target="_blank">' +
'<input type="text" SIZE=40 MAXLENGTH=40 name="daddr" id="daddr" value="" /><br>' +
'<INPUT value="Get Directions" TYPE="SUBMIT">' +
'<input type="hidden" name="saddr" value="' + latlng.lat() + ',' + latlng.lng() +
// "(" + name + ")" +
'"/>';
// The inactive version of the direction info
html = html + '<br>Directions: <a href="javascript:tohere('+i+')">To here<\/a> - <a href="javascript:fromhere('+i+')">From here<\/a>';
var contentString = html;
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
gmarkers.push(marker);
htmls[i] = html;
}
// functions that open the directions forms
function tohere(i) {
infowindow.setContent(to_htmls[i]);
}
function fromhere(i) {
infowindow.setContent(from_htmls[i]);
}
}); //documentready close

Answer 1

All your code is local to the jQuery(document).ready function, so is not available in the global context where HTML click handlers run. Move the function declarations outside of that function.
Looks like your v2 code came from Mike Williams' v2 tutorial. This example of his "Getting Directions" map which I ported to v3, may help you.