3 messages in com.googlegroups.google-visualization-apiRe: Max of date in Google Spreadsheet
FromSent OnAttachments
VWA26 Mar 2008 09:18 
dolphus26 Mar 2008 14:01 
dolphus26 Mar 2008 21:19 
Subject:Re: Max of date in Google Spreadsheet
From:dolphus (hcar@gmail.com)
Date:03/26/2008 02:01:58 PM
List:com.googlegroups.google-visualization-api

Hi,

You might have better luck asking this question on the Gadgets group at:

http://groups.google.com/group/Google-Gadgets-API

The API there tends to cover the JSON method of querying more.

You might try using a spreadsheet visualization map instead of coding the maps API. I have an example at:

http://copaseticflow.blogspot.com/2008/03/using-google-spreadsheet-map-gadget.html

The maps there are showing more than 9 points. I didn't read all your code, but the referenced example shows tooltip bubbles for the map examples.

Best Regards, Hamilton

On Mar 26, 10:18 am, VWA <i.@vwad.nl> wrote:

Hello,

I use the Google Spreadsheet to load data in to Google Maps. This works fine, but only up to 9 adresses? When i add a tenth adress i get an error, how is this possible?

Here is de code i use

-------------------------------- <div style="width:600px; font-family: Verdana; font-size:10px; border:none"> <table id="cm_mapTABLE"> <tbody> <tr id="cm_mapTR">

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

<script src="http://maps.google.com/maps? file=api&v=2&key=ABQIAAAAR7Dc5dDZasNIXFB1XHk- qhQe8GNLGQ7WpF6JBhQFd0WZdbojQBR4vcyt3zuq5RL8lhUr_JGBzEbz6A" type="text/javascript"></script>

<script type="text/javascript"> //<![CDATA[ var cm_map; var cm_mapMarkers = []; var cm_mapHTMLS = [];

// Create a base icon for all of our markers that specifies the // shadow, icon dimensions, etc. var cm_baseIcon = new GIcon(); cm_baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png"; cm_baseIcon.iconSize = new GSize(15, 14); cm_baseIcon.shadowSize = new GSize(10, 9); cm_baseIcon.iconAnchor = new GPoint(9, 34); cm_baseIcon.infoWindowAnchor = new GPoint(9, 2); cm_baseIcon.infoShadowAnchor = new GPoint(10, 9);

// Change these parameters to customize map var param_wsId = "od6"; var param_ssKey = "o01574796078500937402.3536408218486080429"; var param_useSidebar = true; var param_titleColumn = "title"; var param_descriptionColumn = "description"; var param_latColumn = "latitude"; var param_lngColumn = "longitude"; var param_rankColumn = "rank"; var param_iconType = "green"; var param_iconOverType = "orange";

/** * Loads map and calls function to load in worksheet data. */ function cm_load() {

if (GBrowserIsCompatible()) { // create the map cm_map = new GMap2(document.getElementById("cm_map")); cm_map.addControl(new GLargeMapControl()); cm_map.addControl(new GMapTypeControl()); cm_map.setCenter(new GLatLng( 52.1, 5.2), 3, G_SATELLITE_MAP); cm_getJSON(); } else { alert("Sorry, the Google Maps API is not compatible with this browser"); }

}

/** * 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) { cm_mapMarkers[markerNum].openInfoWindowHtml(cm_mapHTMLS[markerNum]);

}

/** * 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) { var sidebarTD = document.createElement("td"); 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 = "10px"; sidebarDIV.style.color = "#000000"; sidebarTD.appendChild(sidebarDIV); document.getElementById("cm_mapTR").appendChild(sidebarTD); }

var bounds = new GLatLngBounds();

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++) { var entry = json.feed.entry[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 GLatLng(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>";

// create the marker var marker = cm_createMarker(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.setZoom(cm_map.getBoundsZoomLevel(bounds)); cm_map.setCenter(bounds.getCenter());

}

/** * 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(point, title, html, rank) { var markerOpts = {}; var nIcon = new GIcon(cm_baseIcon);

if(rank > 0 && rank < 100) { nIcon.imageOut = "http://www.mechatrac.nl/content/Gmaps/Ster_TP.png"; nIcon.imageOver = "http://www.mechatrac.nl/content/Gmaps/ Ster_TP2.png"; nIcon.image = nIcon.imageOut; } else { nIcon.imageOut = "http://gmaps-samples.googlecode.com/svn/trunk/" + "markers/" + param_iconType + "/blank.png"; nIcon.imageOver = "http://gmaps-samples.googlecode.com/svn/trunk/" + "markers/" + param_iconOverType + "/blank.png"; nIcon.image = nIcon.imageOut; }

markerOpts.icon = nIcon; markerOpts.title = title; var marker = new GMarker(point, markerOpts);

GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(html); }); GEvent.addListener(marker, "mouseover", function() { marker.setImage(marker.getIcon().imageOver); }); GEvent.addListener(marker, "mouseout", function() { marker.setImage(marker.getIcon().imageOut); }); GEvent.addListener(marker, "infowindowopen", function() { marker.setImage(marker.getIcon().imageOver); }); GEvent.addListener(marker, "infowindowclose", function() { marker.setImage(marker.getIcon().imageOut); }); 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() {

// Retrieve the JSON feed. var script = document.createElement('script');

script.setAttribute('src', 'http://spreadsheets.google.com/feeds/ list' + '/' + 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);

}

setTimeout('cm_load()', 500);

//]]>

</script>

----------------------