Well done!

You have completed HTML5 Mobile Web Applications!

Preview

Geolocation: Google Static Maps API

5:31 with Jim Hoskins

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.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

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.

You need to sign up for Treehouse in order to set up Workspace