trouble with fusion table map, custom marker and infowindow - google-maps

Question

I have been working on a fusion table map. I am trying to add custom markers and infowindows but I am having issues getting it to show my markers and infowindows. I think I have something out of order or maybe a few syntax errors I am unable to find. I have sort of confused myself up a bit on the process. I would appreciate any help.
var tableId ="1zFwXiOkWbKCY9xRGvXBdHjUkTsirnwbr77WjTds"; // original table
google.load('visualization', '1');
var map;
var markers = [];
var infoWindow = new google.maps.InfoWindow();
function initialize() {
var ak = new google.maps.LatLng(64.958056,-147.618333);
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: ak,
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var queryStr = "SELECT name, lat, lng, description FROM "+tableId+" ORDER BY name";
document.getElementById('info').innerHTML += queryStr +"<br>";
var queryText = encodeURIComponent(queryStr);
var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + queryText);
query.send(getData);
}
function getData(response) {
if (!response) {
alert('no response');
return;
}
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var dt = response.getDataTable();
document.getElementById('info').innerHTML += "rows="+dt.getNumberOfRows()+"<br>";
for (var i = 0; i < dt.getNumberOfRows(); i++) {
var lat = dt.getValue(i,1);
var lng = dt.getValue(i,2);
var name = dt.getValue(i,0);
var description = dt.getValue(i,3);
}
var pt = new google.maps.LatLng(lat, lng);
var html = "<span style='font-size:13px;font-weight:bold;color:#236192;'>" + name + "</span><p style='font-size:12px;'>" + description + "</p>";
var info = html;
}
function createMarker(pt,info) {
var iconURL = 'uaf-icon.png';
var iconSize = new google.maps.Size(29,60);
var iconOrigin = new google.maps.Point(0,0);
var iconAnchor = new google.maps.Point(15,60);
var myIcon = new google.maps.MarkerImage(iconURL, iconSize, iconOrigin, iconAnchor);
var shadowURL = 'uaf-shadow.png';
var shadowSize = new google.maps.Size(63, 60);
var shadowOrigin = new google.maps.Point(0, 0);
var shadowAnchor = new google.maps.Point(15, 60);
var myShadow = new google.maps.MarkerImage(shadowURL, shadowSize, shadowOrigin, shadowAnchor);
var iconShape = [18,0,20,1,22,2,23,3,24,4,25,5,26,6,27,7,27,8,28,9,28,10,28,11,28,12,28,13,28,14,28,15,28,16,28,17,28,18,28,19,27,20,27,21,26,22,26,23,25,24,24,25,23,26,21,27,20,28,16,29,21,31,21,32,21,33,21,34,21,35,20,36,20,37,20,38,19,39,19,40,19,41,18,42,18,43,18,44,18,45,17,46,17,47,17,48,17,49,16,50,16,51,16,52,15,53,15,54,15,55,14,56,14,57,14,58,14,59,13,59,13,58,13,57,13,56,12,55,12,54,12,53,12,52,11,51,11,50,11,49,11,48,11,47,10,46,10,45,10,44,10,43,9,42,9,41,9,40,9,39,9,38,8,37,8,36,8,35,8,34,8,33,7,32,7,31,12,29,9,28,7,27,6,26,4,25,3,24,3,23,2,22,1,21,1,20,0,19,0,18,0,17,0,16,0,15,0,14,0,13,0,12,0,11,0,10,1,9,1,8,2,7,2,6,3,5,4,4,5,3,6,2,8,1,10,0,18,0];
var myMarkerShape = {
coord: iconShape,
type: 'poly'
};
var myMarkerOpts = {
position: point,
map: map,
icon: myIcon,
shadow: myShadow,
shape: myMarkerShape
};
var marker = new google.maps.Marker(myMarkerOpts);
markers.push(marker);
google.maps.event.addListener(marker, 'click', function() {
infoWindow.close();
infoWindow.setContent(info);
infoWindow.open(map,marker);
});
}
function myclick(num) {
google.maps.event.trigger(markers[num], "click");
}

Answer 1

first get the map displaying with default markers. You aren't calling the createMarker function (or creating any markers):
for (var i = 0; i < dt.getNumberOfRows(); i++) {
var lat = dt.getValue(i,1);
var lng = dt.getValue(i,2);
var name = dt.getValue(i,0);
var description = dt.getValue(i,3);
var pt = new google.maps.LatLng(lat, lng);
createMarker(pt,"<b>"+name+"</b><br>"+description);
}
there is a typo in createMarker (there is no "point" variable in the scope of the function, it should be "pt"), look for and address any errors in the javascript console.
function createMarker(pt,info) {
var iconURL = 'uaf-icon.png';
var iconSize = new google.maps.Size(29,60);
var iconOrigin = new google.maps.Point(0,0);
var iconAnchor = new google.maps.Point(15,60);
var myIcon = new google.maps.MarkerImage(iconURL, iconSize, iconOrigin, iconAnchor);
var shadowURL = 'uaf-shadow.png';
var shadowSize = new google.maps.Size(63, 60);
var shadowOrigin = new google.maps.Point(0, 0);
var shadowAnchor = new google.maps.Point(15, 60);
var myShadow = new google.maps.MarkerImage(shadowURL, shadowSize, shadowOrigin, shadowAnchor);
var iconShape = [18,0,20,1,22,2,23,3,24,4,25,5,26,6,27,7,27,8,28,9,28,10,28,11,28,12,28,13,28,14,28,15,28,16,28,17,28,18,28,19,27,20,27,21,26,22,26,23,25,24,24,25,23,26,21,27,20,28,16,29,21,31,21,32,21,33,21,34,21,35,20,36,20,37,20,38,19,39,19,40,19,41,18,42,18,43,18,44,18,45,17,46,17,47,17,48,17,49,16,50,16,51,16,52,15,53,15,54,15,55,14,56,14,57,14,58,14,59,13,59,13,58,13,57,13,56,12,55,12,54,12,53,12,52,11,51,11,50,11,49,11,48,11,47,10,46,10,45,10,44,10,43,9,42,9,41,9,40,9,39,9,38,8,37,8,36,8,35,8,34,8,33,7,32,7,31,12,29,9,28,7,27,6,26,4,25,3,24,3,23,2,22,1,21,1,20,0,19,0,18,0,17,0,16,0,15,0,14,0,13,0,12,0,11,0,10,1,9,1,8,2,7,2,6,3,5,4,4,5,3,6,2,8,1,10,0,18,0];
var myMarkerShape = {
coord: iconShape,
type: 'poly'
};
var myMarkerOpts = {
position: pt,
map: map,
icon: myIcon,
shadow: myShadow,
shape: myMarkerShape */
};
var marker = new google.maps.Marker(myMarkerOpts);
markers.push(marker);
google.maps.event.addListener(marker, 'click', function() {
infoWindow.close();
infoWindow.setContent(info);
infoWindow.open(map,marker);
});
}
working example (with default icons)