Mapbox data with google sheets - javascript

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!

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.

Related

How to get information on hidden rows from Google Sheet API without Google Apps Script

I am using the Google Sheets API V4 to retrieve its data in JSON like below. That includes all rows, even the ones currently not shown in the Spreadsheet UI because of a filtering in one of the columns.
Is there a way to get only the shown rows or information whether a row is hidden or not?
The Google Apps Script allows such data retrieval using i.e. the .hiddenByFilter Method (see https://cloud.google.com/blog/products/application-development/using-google-sheets-filters-in-add-ons ). However, I am not able to include that in my API Query whatsoever.
$.getJSON("https://sheets.googleapis.com/v4/spreadsheets/" + SpreadsheetID + "/values/Color1!A2:Q?key=<MY_API_KEY>", function(data) {
// data.values contains the array of rows from the spreadsheet. Each row is also an array of cell values.
$(data.values).each(function() {
var location = {};
location.title = this[2];
location.latitude = parseFloat(this[10]);
location.longitude = parseFloat(this[9]);
location.institution = this[3];
//location.hidden = <?>;
locations.push(location);
});
Is there any workaround?
You can use Spreadsheets.get endpoint. Then filter sheets/data/rowData/values using sheets/data/rowMetadata/hiddenByUser field client side.

How to pass parameters to URL and retrieve with PHP?

I noticed that there are a lot of these questions but I can't find something that relates to my particular project. I am building a Instagram and Google maps app. What I'm trying to do is I'm pulling all JSON format endpoints from Instagram with PHP. With Google maps, I'm adding the longitude and latitude coordinates that this certain API call passes through so you can see where the user has taken the photo at the time it was created. What I'm working on is using Google's event methods I am able to center longitude and latitude coordinates to the URL using the function parent.location.hash.
google.maps.event.addListener(map, 'center_changed', function(){
var control_center = map.getCenter();
var lng = control_center.lng();
var lat = control_center.lat();
parent.location.hash="&lng="+lng +"&lat="+lat;
$('.lng').append(lng);
console.log(map.getCenter());
console.log(lng +', ' +lat);
});
The issue I'm now running into is when I tried to retrieve lng and lat with PHP $_GET it was not working. I found out because it's a fragment and it never gets sent to the server. I found other tips and tricks like parse_url but that echos one string. Here is a snippet of what the current URL looks like when someone has done a search and moving Google maps around in the viewport -> api.php?location=houston#&lng=-95.34908043923292&lat=29.74942788453117.
The concept behind this API mashup is you have a search box, and you type in Houston, TX. Google maps will load and a feed from Instagram with display that have coordinates that are within Houston, Tx. The map will show where exactly where those photos taken. You move the map and we want more Instagram photos to show up but I can't pass the lng and lat variables to instagrams api. This is a bit of a long one, sorry.
Pastebin
can you try this and let me know,
$url=parse_url("http://domain.com/api.php?location=houston#&lng=-95.34908043923292&lat=29.74942788453117");
$myurl = $url["fragment"];
echo $myurl;
Update, to get individual variables
$url=parse_url("http://domain.com/api.php?location=houston#&lng=-95.34908043923292&lat=29.74942788453117");
$myurl = $url["fragment"];
echo $myurl.'<br>';
parse_str($myurl);
echo $lng.'<br>';
echo $lat;

Google Maps Fusion Table API SQL "LIKE" command not working

I'm using Google Maps API to pull data from a Fusion Table based on user input. I trying to use the "LIKE" command to create a more robust search feature, however anything other than simple where queries (like where x=y or x>y) seems to return every entry or no entry at all from the fusion table.
main.js
function updateMap(layer, tableID) {
var input = document.getElementById('input').value;
var newLayer = new google.maps.FusionTablesLayer({
query: {
select: 'FULL_ADDRESS',
from: tableID,
where: "FULL_ADDRESS LIKE \'%" + input + "%\' "
}
});
console.log(newLayer);
layer.setMap(null);//deletes old layer
newLayer.setMap(map);//sets map to new layer
LAYER = newLayer;// sets global layer to new layer
}
according to the documentation here and here this should work fine.
index.html
<input id="input" class="controls floating-label" type="text" placeholder="Search by Address or Zip Code">
fusion table entry
000000000000000000| Taylor Road , Birmingham, AL, 36117| 0 |$0.00 $6,800.00 |$0.00 |$0.00 |$1,360.00
2nd field is FULL_ADDRESS
live site
My goal is to use the user input to try to partially match a addresses however, it is not working correctly. Is there something I'm missing?
Thanks!
LIKE doesn't appear to work so use MATCHES instead

Google maps api client side json in javascript

So I am sure that there is a simple solution to my problem but I just can't seem to find an answer. I have an application that has two users place map markers onto a google maps map (and they can see eachothers markers). I want to find the average latitude and longitude and then use the Places API to get JSON that contains nearby locations from that average so the users can decide on a middle ground.
My problem is occurring with getting getting the JSON. Because it is cross domain I can't just use an AJAX call (and the API does not support jsonp). So I was hoping to do this client side in javascript. There are numerous tutorials out there for how to use the Places API when an actual map is on the screen, so how could I do this without the map and just the JSON data?
My application is using JavaScript, JQuery, and Java (a Jersey REST service). I read that there are ways to set up cross domain calls but those all seemed to apply to PHP.
If your application displays Places API data on a map, that map must be provided by Google.
If your application displays Places API data on a page or view that does not also display a Google Map, you must show a "Powered by Google" logo with that data. For example, if your application displays a list of places on one tab, and a Google Map with those places on another tab, the first tab must show the "Powered by Google" logo.
The following ZIP file contains the "Powered by Google" logo in the correct sizes for desktop, Android and iOS applications. You may not resize or modify these logos in any way.
Download: powered-by-google.zip
Read here: https://developers.google.com/maps/documentation/javascript/places#LogoRequirements
To use the Places library, just include the library in the API call and give the Places Service an HTML element instead of a map object:
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
Code:
var request = {
location: new google.maps.LatLng(52.48,-1.89),
radius: '500',
types: ['store']
};
var container = document.getElementById('results');
var service = new google.maps.places.PlacesService(container);
service.nearbySearch(request, callback);
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
container.innerHTML += results[i].name + '<br />';
}
}
}
JSFiddle demo

How to retrieve data from Google Spreadsheet to Javascript or JSON?

This is public spreadsheet created using Google Drive:
https://docs.google.com/spreadsheets/d/1hA4LKZn9yKoqnSzaI6_73GQSj_ZVpB3O0kC93QM98Vs/pubhtml
How to retrieve data from Google Spreadsheet to Javascript or JSON with new Google Spreadsheets API version 3.0 ?
You can access a cell-based basic feed using the following URL structure: https://spreadsheets.google.com/feeds/cells/1hA4LKZn9yKoqnSzaI6_73GQSj_ZVpB3O0kC93QM98Vs/od6/public/basic?alt=json . By default the feed is in XML form, however, you can request JSON format using alt=json query parameter.
This feed also supports JSONP requests, so an example of fetching this data from a browser with jQuery might look like:
var url = "https://spreadsheets.google.com/feeds/cells/1hA4LKZn9yKoqnSzaI6_73GQSj_ZVpB3O0kC93QM98Vs/od6/public/basic?alt=json";
$.ajax({
url:url,
dataType:"jsonp",
success:function(data) {
// data.feed.entry is an array of objects that represent each cell
},
});
If, alternatively, you want to keep it all in the Google environment. if you're looking for a more controlled JSON generator, check out this gist:
JSONPuller
It takes in a Spreadsheet sheet and returns an array of objects, with the row that you decide as the key (defaults to whichever row is frozen)
Cheers,
I made it work using opensheet.
Steps:
Make sure the sheet as read access - Anyone with the link can view it.
Sheet should have First row as Header row with titles
Then get the sheet data as json using the following link - https://opensheet.elk.sh/spreadsheet_id/sheet_name
Replace spreadsheet_id with your sheet id and sheet_name with your sheet name. No authentication is required.

Categories