The Code:

var tableid = 260197;
var center = new google.maps.LatLng(37.4, -100.1);
var zoom = 3;

function initialize() {

  // Initialize the map
  var map = new google.maps.Map(document.getElementById('map_canvas'), {
    center: center,
    zoom: zoom,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  
  // Initialize the layer
  var layer = new google.maps.FusionTablesLayer(tableid);
  layer.setMap(map);
  
  // Create the legend and display on the map
  var legendDiv = document.createElement('DIV');
  var legend = new Legend(legendDiv, map);
  legendDiv.index = 1;
  map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legendDiv);
}

function Legend(controlDiv, map) {
  // Set CSS styles for the DIV containing the control
  // Setting padding to 5 px will offset the control
  // from the edge of the map
  controlDiv.style.padding = '5px';

  // Set CSS for the control border
  var controlUI = document.createElement('DIV');
  controlUI.style.backgroundColor = 'white';
  controlUI.style.borderStyle = 'solid';
  controlUI.style.borderWidth = '1px';
  controlUI.title = 'Legend';
  controlDiv.appendChild(controlUI);

  // Set CSS for the control text
  var controlText = document.createElement('DIV');
  controlText.style.fontFamily = 'Arial,sans-serif';
  controlText.style.fontSize = '12px';
  controlText.style.paddingLeft = '4px';
  controlText.style.paddingRight = '4px';
  
  // Add the text
  controlText.innerHTML = '<b>Butterflies*</b><br />' +
  	'<img src="http://maps.google.com/mapfiles/ms/micons/red-dot.png" /> Battus<br />' +
  	'<img src="http://maps.google.com/mapfiles/ms/micons/yellow-dot.png" /> Speyeria<br />' +
  	'<img src="http://maps.google.com/mapfiles/ms/micons/green-dot.png" /> Papilio<br />' +
  	'<img src="http://maps.google.com/mapfiles/ms/micons/blue-dot.png" /> Limenitis<br />' +
  	'<img src="http://maps.google.com/mapfiles/ms/micons/purple-dot.png" /> Myscelia<br />' + 
  	'<small>*Data is fictional</small>';
  controlUI.appendChild(controlText);
}