#######################################

<!-- You can see the sample spreadsheet here:
https://spreadsheets.google.com/pub?key=0AneCM3YnuzpAcG5FczJCXzM3Uy1ER0dGSTZrZFFaUFE&output=html
-->

  <table id="cm_mapTABLE"> <tbody> <tr id="cm_mapTR">

    <td> <div id="cm_map" style="width:450px; height:450px"></div> </td>
  </tr> </tbody></table>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

 * Loads map and calls function to load in worksheet data.
 */
function cm_load() {  
  var myLatlng = new google.maps.LatLng(43.907787,-79.359741);
  var myOptions = {
    zoom: 2,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  cm_map = new google.maps.Map(document.getElementById("cm_map"), myOptions);

}

 * Function called when marker on the map is clicked.
 * Opens an info window (bubble) above the marker.
 * @param {Number} markerNum Number of marker in global array
 */
function cm_markerClicked(markerNum) {
  var infowindowOptions = {
    content: cm_mapHTMLS[markerNum]
  }
  var infowindow = new google.maps.InfoWindow(infowindowOptions);
  infowindow.open(cm_map, cm_mapMarkers[markerNum]);
  cm_setInfowindow(infowindow);
}

 * Function that sorts 2 worksheet rows from JSON feed
 * based on their rank column. Only called if column is defined.
 * @param {rowA} Object Represents row in JSON feed
 * @param {rowB} Object Represents row in JSON feed
 * @return {Number} Difference between row values
 */
function cm_sortRows(rowA, rowB) {
  var rowAValue = parseFloat(rowA["gsx$" + param_rankColumn].$t);
  var rowBValue = parseFloat(rowB["gsx$" + param_rankColumn].$t);

  return rowAValue - rowBValue;

 * Called when JSON is loaded. Creates sidebar if param_sideBar is true.
 * Sorts rows if param_rankColumn is valid column. Iterates through worksheet rows, 
 * creating marker and sidebar entries for each row.
 * @param {JSON} json Worksheet feed
 */       
function cm_loadMapJSON(json) {
  var usingRank = false;

  if(param_useSidebar == true) {

    sidebarTD.setAttribute("width","150");
    sidebarTD.setAttribute("valign","top");
    var sidebarDIV = document.createElement("div");
    sidebarDIV.id = "cm_sidebarDIV";
    sidebarDIV.style.overflow = "auto";
    sidebarDIV.style.height = "450px";
    sidebarDIV.style.fontSize = "11px";
    sidebarDIV.style.color = "#000000";
    sidebarTD.appendChild(sidebarDIV);
    document.getElementById("cm_mapTR").appendChild(sidebarTD);
  }

  if(json.feed.entry[0]["gsx$" + param_rankColumn]) {
    usingRank = true;
    json.feed.entry.sort(cm_sortRows);
  }

  for (var i = 0; i < json.feed.entry.length; i++) {

    if(entry["gsx$" + param_latColumn]) {
      var lat = parseFloat(entry["gsx$" + param_latColumn].$t);
      var lng = parseFloat(entry["gsx$" + param_lngColumn].$t);
      var point = new google.maps.LatLng(lat,lng);
      var html = "<div style='font-size:12px'>";
      html += "<strong>" + entry["gsx$"+param_titleColumn].$t 
              + "</strong>";
      var label = entry["gsx$"+param_titleColumn].$t;
      var rank = 0;
      if(usingRank && entry["gsx$" + param_rankColumn]) {
        rank = parseInt(entry["gsx$"+param_rankColumn].$t);
      }
      if(entry["gsx$" + param_descriptionColumn]) {
        html += "<br/>" + entry["gsx$"+param_descriptionColumn].$t;
      }
      html += "</div>";

      var marker = cm_createMarker(cm_map,point,label,html,rank);
      // cm_map.addOverlay(marker);
      cm_mapMarkers.push(marker);
      cm_mapHTMLS.push(html);
      bounds.extend(point);
    
      if(param_useSidebar == true) {
        var markerA = document.createElement("a");
        markerA.setAttribute("href","javascript:cm_markerClicked('" + i +"')");
        markerA.style.color = "#000000";
        var sidebarText= "";
        if(usingRank) {
          sidebarText += rank + ") ";
        } 
        sidebarText += label;
        markerA.appendChild(document.createTextNode(sidebarText));
        sidebarDIV.appendChild(markerA);
        sidebarDIV.appendChild(document.createElement("br"));
        sidebarDIV.appendChild(document.createElement("br"));
      } 
    }
  }

  cm_map.setCenter(bounds.getCenter());
}

  if (cm_openInfowindow != undefined) {
    cm_openInfowindow.close();
  }

}

 * Creates marker with ranked Icon or blank icon,
 * depending if rank is defined. Assigns onclick function.
 * @param {GLatLng} point Point to create marker at
 * @param {String} title Tooltip title to display for marker
 * @param {String} html HTML to display in InfoWindow
 * @param {Number} rank Number rank of marker, used in creating icon
 * @return {GMarker} Marker created
 */
function cm_createMarker(map, latlng, title, html, rank) {
  var iconSize = new google.maps.Size(20, 34);
  var iconShadowSize = new google.maps.Size(37, 34);
  var iconHotSpotOffset = new google.maps.Point(9, 0); // Should this be (9, 34)?
  var iconPosition = new google.maps.Point(0, 0);
  var infoWindowAnchor = new google.maps.Point(9, 2);
  var infoShadowAnchor = new google.maps.Point(18, 25);

  var iconImageUrl;
  var iconImageOverUrl;
  var iconImageOutUrl;

  if(rank > 0 && rank < 100) {

        "markers/" + param_iconType + "/marker" + rank + ".png";
    iconImageOverUrl = "http://gmaps-samples.googlecode.com/svn/trunk/" +
        "markers/" + param_iconOverType + "/marker" + rank + ".png";
    iconImageUrl = iconImageOutUrl;
  } else { 
    iconImageOutUrl = "http://gmaps-samples.googlecode.com/svn/trunk/" +
        "markers/" + param_iconType + "/blank.png";
    iconImageOverUrl = "http://gmaps-samples.googlecode.com/svn/trunk/" +
        "markers/" + param_iconOverType + "/blank.png";
    iconImageUrl = iconImageOutUrl;
  }

      new google.maps.MarkerImage(iconShadowUrl, iconShadowSize,
                                  iconPosition, iconHotSpotOffset);

      new google.maps.MarkerImage(iconImageUrl, iconSize,
                                  iconPosition, iconHotSpotOffset);

      new google.maps.MarkerImage(iconImageOverUrl, iconSize,
                                  iconPosition, iconHotSpotOffset);

      new google.maps.MarkerImage(iconImageOutUrl, iconSize,
                                  iconPosition, iconHotSpotOffset);

    title: title,
    icon: markerImage,
    shadow: markerShadow,
    position: latlng,
    map: map
  }

  google.maps.event.addListener(marker, "click", function() {
    var infowindowOptions = {
      content: html
    }
    var infowindow = new google.maps.InfoWindow(infowindowOptions);
    cm_setInfowindow(infowindow);
    infowindow.open(map, marker);
    marker.setIcon(markerImageOut);
  });
  google.maps.event.addListener(marker, "mouseover", function() {
    marker.setIcon(markerImageOver);
  });
  google.maps.event.addListener(marker, "mouseout", function() {
    marker.setIcon(markerImageOut);
  });

  return marker;

 * Creates a script tag in the page that loads in the 
 * JSON feed for the specified key/ID. 
 * Once loaded, it calls cm_loadMapJSON.
 */
function cm_getJSON() {

  var script = document.createElement('script');

                         + '/' + param_ssKey + '/' + param_wsId + '/public/values' +
                        '?alt=json-in-script&callback=cm_loadMapJSON');
  script.setAttribute('id', 'jsonScript');
  script.setAttribute('type', 'text/javascript');
  document.documentElement.firstChild.appendChild(script);
}

</script>
</body> </html>