PAUL SAXMAN: Hello, and welcome to Google Maps
Developer Shortcuts.
I'm Paul Saxman, and this week is our premiere episode of our
shortcut series.
We're going to try to teach tips, tricks, and techniques
for building beautiful, compelling, useful maps in
about five minutes or less.
So that's actually the show is five minutes or less.
It might take you a couple minutes longer to get your map
up and running, but that's the show.
So with that, this week what we're going to do is we're
going to talk about getting Google Drive data into a
Google Map, and if we have time we'll do the inverse--
try to get a Google Map into a Google Drive.
So we can go both ways, one or the other, but let's start
with the easy one.
So if we go over to my spreadsheet here, you can see
that I have a spreadsheet of about 10 cities.
That's column A. Column B, I have populations, and C and D
is longitude and latitude.
I got this data from the Natural Earth data set which
publishes all kinds of geographic data we talked
about in some preview shows.
Getting that into drive in this spreadsheet, just a
matter of cutting and pasting.
If you have a lot more data, though, getting into drive--
different techniques can apply.
But the technique here that I want to teach today is
actually building a web service using Google Drive to
serve this data to a map.
So the first thing I'm going to do is I'm going to go over
to Tools and Script Manager.
And you can see here I have a couple scripts already.
If you don't have these scripts, which you won't the
first time you run this, you just hit the New button.
I'm going to say start with--
you can either start with a script as a web app or just a
blank project.
I'm going to start with blank project, because, actually,
building these web apps is really simple.
And then you're ready to go actually editing your script.
But I'm going to actually start with the one I
already worked on.
So you can see a few things here.
I have a couple of constants at the top.
The spreadsheet ID-- that actually comes from over on my
spreadsheet.
If I close this window, that spreadsheet ID is actually in
the browser bar up at the top.
So you can copy that out for this script.
Sheet name--
this is called data.
Actually, this is what I called the sheet here down at
the bottom.
By default, it's called sheet one or something like that.
You just actually click on the little down
arrow and rename it.
These are two important steps-- getting your key and
naming your sheet.
Next thing is you're going to want to create a doGet get
function and take a request object.
So here I'm actually using the request object, getting
parameters out, and getting JSONP, which is one of the
parameters that I'm going to pass in
later to this web service.
So that is actually the callback that I'm passing into
the web service.
And here what I'm doing is actually getting the data out
of my sheet.
So here I'm using the spreadsheet
app, opening by ID.
I'm taking the spreadsheet ID that ended up here.
Get sheet by name, I'm using data which was a sheet that I
named earlier, and get data range.
So this is the range object now that I'm getting out of
this call here.
Next is I'm going to stringify into JSON the values from that
spreadsheet.
So here I'm doing range dot get values.
I'm passing that into this JSON stringify method, and
then I'm wrapping that into JSONP function call.
So I'm using my callback, which is the method I'm
passing in, or will be passing into the request, and wrapping
that in parentheses, because this is actually a function
call, a JavaScript function call, that
I'll be using later.
And very last line here, what I'm doing is I'm just taking
that JSON output, creating this text output object,
setting the MIME type to JSON, and returning
from this doGet method.
This down here is just some testing code.
If you want to actually run this--
create a function like this to run it, you can get the output
in the logs just for some eyeballs testing.
Once you have such a script together, the next thing
you're going to want to do is go to
file and manage versions.
So what here you're going to do is name a version for your
application--
name your version and save a new version.
So I didn't make any changes, so I'm not going
to save a new one.
You can see I have about five versions already, though.
Or I have had five versions already.
We'll close that.
Once you've saved the version, you can go over to this little
arrow here in the cloud, which is deploy as a web app, or you
can also hit the Publish button and also
deploy as web app.
If you haven't already deployed it, I believe you
just get the bottom part here.
So you pick a project version, which was the version that we
created earlier, executable as me, and what you're going to
want to do is you're going to make anyone, even anonymous,
can actually execute your app.
Once you do this, be careful, because once this is up and
running anybody can actually extract that data using this
web service from your spreadsheet.
So that's it.
So once we do all those tricks-- so let me go back
here, deploy as a web app.
I already have this running, so I'm just going to say give
me my latest code.
You can see that I get a URL here, and this actually
returns the data in JSON in my spreadsheet.
Here I'm getting undefined because I didn't actually pass
in the JSONP.
Very last thing, so you're going to want to copy this
script line out here, because this is what you're actually
going to paste into your map code.
Now I'm going to go over to some map code.
I'm going to paste in this data services URL, which was
the one that I just made, or that I just copied out.
I'm going to add a JSONP parameter.
So this is the callback function.
So callback is actually my JSONP callback in my map
JavaScript.
I'm initializing a map here.
Here's a little tricky bit.
So after I've initialized the map, I'm actually going to
create a script tag, pass in the data services URL, which
is the URL to this web service that's running in Google
Drive, and then I'm actually going to append this object to
the head of my DOM tree.
And that's actually going to execute the
script that this JSON--
it's actually going to call the JSONP service.
And then I have a callback function.
I'm getting the data back.
This is just a--
we saw the JSON before.
It's actually just an array of an array.
So I'm actually creating a marker for each of the
lat-long points that are in this spreadsheet.
That's pretty much it.
And then there's a little bit of map canvas code down here.
So it's a very simple application.
And if we go over to what the end product looks like, I'm
just running this on locally, so if I reload this, this is
the code that I just showed a minute ago.
You'd see all these points rendered on a
map from Google Drive.
Just to prove the concept, if I go back over here, let's say
I want to get rid of all but one of these.
I could just delete those out, spreadsheet saved.
I go back to my awesome map.
I reload it, and all I have is Japan now.
So this is a great way you can create dynamic data or create
a spreadsheet, share it with other people that can actually
change the data, dynamically changing the map.
Really great use case there.
I'm out of time, so today I'm not going to cover actually
getting your Google Map into Google Drive, but we'll cover
that in another episode.
So if you have any questions about the show, if you have
any other ideas for future shows, let me know.
And, yeah-- just post them in the comments of the YouTube
stream or on Google+ With that, we'll see you next week.