I am working to develop a crowdsourcing website that takes input from google forms and displays this information on a map. I am working with mapbox and am looking for a way to get the data points in my google spreadsheet (with lat/long info) to automatically show up on the map. Any tips would be appreciated, thanks!
2 Answers
I'm working on a similar project.
I 'published' my google spreadsheet: file > Publish To Web.
You should get a popup window with a URL for your sheet:
https://docs.google.com/spreadsheets/d/[your ID here]/pubhtml
Once you have the ID you can use it on your website:
// ID of the Google Spreadsheet
var spreadsheetID = 'fakeExample';
// Make sure it is public or set to `Anyone with link can view`
var url = "https://spreadsheets.google.com/feeds/list/" + spreadsheetID + "/od6/public/values?alt=json";
$.getJSON(url, function(data) {
var entry = data.feed.entry;
$(entry).each(function(){
//do stuff with each entry in your spreadsheet
// for example, build a GeoJSON object with your lat/lons or add an individual marker
// ex: add the 'country' column to the `results` box
$('.results').prepend('<h2>'+this.gsx$country.$t+'</h2>);
});
});
I suppose you could use any mapbox js map with omnivore, for example. The form results go in a google sheet - geocode it automatically with some script - publish the sheet to the web with results in csv - the coordinates are pulled automatically to the map which updates upon loading.