This link has been bookmarked by 246 people . It was first bookmarked on 04 Apr 2007, by John Martin.
-
09 Oct 14
-
08 Jul 14
-
07 May 14
-
01 Oct 13
-
06 Aug 13
an88zi"Embed a dynamic map of a public Google Spreadsheet on your webpage. After loading in your spreadsheet data and customizing the map, you can copy the generated code into your webpage. An example spreadsheet's data and map of great Seattle restaurants has been pre-loaded. You can view the original spreadsheet in HTML or XML.
This wizard uses the Google Maps API and Google Spreadsheets API." -
13 Mar 13
-
06 Feb 13
-
27 Sep 12
justin hardman"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> </head><body>
<!-- ++Begin GSpreadsheets Map Wizard Generated Code++ -->
<div style="width:905px; font-family:Arial,
sans-serif; font-size:11px; border:1px solid black">
<table id="cm_mapTABLE"> <tbody> <tr id="cm_mapTR">
<td> <div id="cm_map" style="width:780px; height:550px"></div> </td>
</tr> </tbody></table>
</div>
<script src="http://maps.google.com/maps?file=api&v=2&key="
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(20, 34);
cm_baseIcon.shadowSize = new GSize(37, 34);
cm_baseIcon.iconAnchor = new GPoint(9, 34);
cm_baseIcon.infoWindowAnchor = new GPoint(9, 2);
cm_baseIcon.infoShadowAnchor = new GPoint(18, 25);
// Change these parameters to customize map
var param_wsId = "od6";
var param_ssKey = "0AlMtm07nft_2dFRzZlRhcXJWRFpIdE54blBYNE4xNUE";
var param_useSidebar = true;
var param_titleColumn = "name";
var param_descriptionColumn = "";
var param_latColumn = "latitude";
var param_lngColumn = "longitude";
var param_rankColumn = "";
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( 43.907787,-79.359741), 2);
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 = "550px";
sidebarDIV.style.fontSize = "11px";
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://gmaps-samples.googlecode.com/svn/trunk/" +
"markers/" + param_iconType + "/marker" + rank + ".png";
nIcon.imageOver = "http://gmaps-samples.googlecode.com/svn/trunk/" +
"markers/" + param_iconOverType + "/marker" + rank + ".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>
</body> </html>" -
09 Sep 12
-
06 Feb 12
-
31 Jan 12
-
09 Dec 11
Joseph MorninEmbed a dynamic map of a public Google Spreadsheet on your webpage. After loading in your spreadsheet data and customizing the map, you can copy the generated code into your webpage. An example spreadsheet's data and map of great Seattle restaurants has been pre-loaded. You can view the original spreadsheet in HTML or XML.
-
06 Dec 11
-
19 Nov 11
-
25 Oct 11
-
24 Oct 11
-
14 Oct 11
-
12 Oct 11
-
27 Sep 11
-
15 Sep 11
Jeremy RueOnline tool someone created to easily make a Google map from an online Google Doc spreadsheet.
-
13 Sep 11
-
12 Sep 11
-
10 Sep 11
-
31 Aug 11
-
19 Aug 11
-
14 Jul 11
-
13 Jun 11
-
30 May 11
-
27 May 11
-
16 May 11
-
06 Apr 11
-
30 Mar 11
-
21 Mar 11
-
09 Mar 11
-
22 Feb 11
-
06 Feb 11
-
29 Jan 11
-
18 Jan 11
Scott Scanlon<!-- ++Begin GSpreadsheets Map Wizard Generated Code++ -->
<div style="width:575px; font-family:Arial,
sans-serif; font-size:11px; border:1px solid black">
<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="
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(20, 34);
cm_baseIcon.shadowSize = new GSize(37, 34);
cm_baseIcon.iconAnchor = new GPoint(9, 34);
cm_baseIcon.infoWindowAnchor = new GPoint(9, 2);
cm_baseIcon.infoShadowAnchor = new GPoint(18, 25);
// Change these parameters to customize map
var param_wsId = "od6";
var param_ssKey = "o16162288751915453340.4402783830945175750";
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( 43.907787,-79.359741), 2);
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_mapMarke -
05 Jan 11
-
04 Jan 11
-
16 Dec 10
Bettina MinderCreate a map from a published Google Spreadsheet
-
14 Dec 10
-
23 Nov 10
-
15 Nov 10
Debbie JohnsonTake data from a Google spreadsheet and populate a
Google Map: http://bit.ly/3wqQVx -
14 Nov 10
-
Yvonne MurtaghCreate a map from a published Google Spreadsheet Embed a dynamic map of a public Google Spreadsheet on your webpage. After loading in your spreadsheet data and customizing the map, you can copy the generated code into your webpage. An example spreadsheet
-
Geoff CainMake a custom map from a spread sheet.
spreadsheets map geocoding googlemaps spreadsheet mashups maps mapping geography googledocs
-
Tania ShekoCreate a map from a published Google spreadsheet
-
12 Nov 10
-
Joe FahsTake data from a Google spreadsheet and populate a Google Map: http://bit.ly/3wqQVx disclaimer: very geeky! #gct
– John Sowash (jrsowash) http://twitter.com/jrsowash/status/2946257513353216 -
25 Oct 10
-
19 Oct 10
-
18 Oct 10
-
13 Oct 10
-
21 Sep 10
Martos HoffmanCreate a map from a published Google Spreadsheet
googlemaps spreadsheet mashup maps api googledocs map google
-
15 Aug 10
-
14 Aug 10
-
10 Aug 10
-
28 Jul 10
-
27 Jul 10
-
15 Jul 10
-
28 Jun 10
-
11 May 10
-
10 May 10
-
27 Apr 10
-
11 Apr 10
-
23 Mar 10
-
11 Mar 10
-
09 Mar 10
-
02 Feb 10
-
19 Jan 10
-
05 Jan 10
-
31 Dec 09
-
18 Dec 09
-
09 Dec 09
-
07 Dec 09
-
01 Dec 09
-
29 Nov 09
paranaveenEmbed a dynamic map of a public Google Spreadsheet on your webpage. After loading in your spreadsheet data and customizing the map, you can copy the generated code into your webpage. An example spreadsheet's data and map of great Seattle restaurants has b
-
Bob SmithEmbed a dynamic map of a public Google Spreadsheet on your webpage. After loading in your spreadsheet data and customizing the map, you can copy the generated code into your webpage. An example spreadsheet's data and map of great Seattle restaurants has b
-
18 Oct 09
OLD-Lauri PohjanenKartan luonti Google Spreadsheet taulukon tiedoista
-
08 Oct 09
-
26 Sep 09
-
06 Sep 09
-
04 Sep 09
-
26 Aug 09
-
22 Aug 09
Angela DiceLets you make maps from spreadsheets. Must have latitude and longitude and description needs html breaks
-
03 Jun 09
-
30 May 09
-
27 May 09
-
25 May 09
-
21 May 09
-
14 May 09
Page Comments
Would you like to comment?
Join Diigo for a free account, or sign in if you are already a member.