Heads up! To view this whole video, sign in with your Courses Plus account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed HTML5 Mobile Web Applications!
You have completed HTML5 Mobile Web Applications!
Preview
In this video we take a look at the Google Static Map API which offers us an easy way to generate a map image.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
So, we've updated our code.
0:00
So now, we can actually tag notes with latitude and longitude, and we can actually view
0:02
that latitude and longitude in the detail view of all of our notes.
0:06
Now, that's not very helpful.
0:12
What we'd actually like to do is to be able to add a map into our notes
0:14
that have location data and put a pin over them.
0:17
Now, there are a lot of different ways we could do maps.
0:22
We could use the normal Google maps API that you would see on maps.google.com
0:24
to create a nice zoomable map.
0:28
There are maps from other providers including Yahoo and Microsoft and others,
0:31
but I think the best solution on a mobile device like this is to actually use the Google
0:38
Static Maps API, and this doesn't actually create a JavaScript map.
0:42
Instead, it creates an image based on a URL.
0:49
So, all we need to do in our application is create the URL that will
0:53
generate the correct map and pass it as an image source, and Google will create
0:58
the map for us and return it as in image.
1:04
Now, the goal of our map is to be completely offline.
1:08
We don't want to use the server to store our data.
1:12
However, for a map we really don't have any choice.
1:15
There's no real offline way of doing this.
1:17
So, if the device or browser is not connected to the internet, the maps won't work.
1:20
But if they are, we'll be able to get map data.
1:26
Now, if they're offline, they'll still be able to get to their notes and
1:29
see information about it, and if the map is cached, then they'll actually be able to
1:31
see the map, however, they won't be able to get any new maps.
1:37
So, what we want to do is take a look at the static map developer's API here,
1:41
and there's a quick example, and basically what we're going to do is create a URL
1:47
to maps.Google.com/maps/api/staticmap.
1:52
So, the parameters will define what kind of map we're going to create.
1:58
In this example, they're using a few different pins, and it just creates this image
2:01
based on the Brooklyn Bridge.
2:06
So, if we look through the documentation, we can find what types of parameters
2:09
we need to pass and how they need to be formatted.
2:13
Now, down in this section here, there are different parameters.
2:17
For one is the location parameters, one being the center, which is going to be
2:21
where the map is centered, and we want it to be centered directly on our notes.
2:25
So, we're going to use a latitude/longitude pair.
2:30
Alternatively, we could use something like a description of a neighborhood
2:33
or some other landmark or address, but since we have the latitude and longitude,
2:38
that's what we'll do.
2:42
The other parameter we need to do is zoom, and that tells the map how wide
2:44
to create it from the center.
2:47
We don't want it to be too close because we want to get some context, but we want
2:50
it to be zoomed enough so we can get an idea of where the note was created.
2:53
Then there are parameters about the actual image itself.
2:59
So, it's size, which is required, and that's going to be how many pixels
3:03
wide and tall the map is going to be.
3:06
We can define a format if we like gif or jpeg or png.
3:09
We can tell it what type of map if we want to have a normal road map or a satellite map,
3:14
and there's things like language, which can tell us what type of language you want to use,
3:21
but let's go ahead and use the default.
3:24
Then what we need to worry about is actually placing the markers, and we're going to
3:28
use that by doing the markers parameter, and this has a fairly interesting
3:31
language we need to parse.
3:36
Basically, each marker's attribute defines a marker, and its information
3:39
based on its color and its label and its location is all crammed together
3:44
as the value of the marker's attribute, and separated by the pipe character,
3:50
or %7C as it's encoded in the URL.
3:56
Now, the last parameter we need to look at is the sensor parameter,
4:01
and that tells Google whether or not to use the location information
4:05
it can derive to figure out the static map.
4:08
We don't need to use the sensor because we have all the information we need,
4:11
so we'll set that to false, however, it does say it is required.
4:15
Let's take a little deeper look at the marker's attribute.
4:20
In this example, we can see the center, zoom, and map type are all set,
4:24
but the marker's attribute, the first one being color:blue, and then we see %7C,
4:31
and that's the pipe character, but how we encode the pipe character in a URL.
4:38
Then they do a label:S which means we're defining this S one right here,
4:42
and then there's another %7C, and then there's a latitude and longitude pair
4:50
separated by commas.
4:55
So, the parameters of each marker are separated by colons, and each key value pair
4:58
is separated by a pipe.
5:03
So, we're going to have to go ahead and construct this string all by ourselves,
5:08
and the best way for us to do this is to create a method on our note model
5:11
that will actually generate the map string for us, then all we need to do in our
5:17
template is create an image tag, call that map string method, and we should be able to
5:21
see a map in our page.
5:26
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up