1 00:00:00,000 --> 00:00:02,000 So, we've updated our code. 2 00:00:02,000 --> 00:00:06,000 So now, we can actually tag notes with latitude and longitude, and we can actually view 3 00:00:06,000 --> 00:00:12,000 that latitude and longitude in the detail view of all of our notes. 4 00:00:12,000 --> 00:00:14,000 Now, that's not very helpful. 5 00:00:14,000 --> 00:00:17,000 What we'd actually like to do is to be able to add a map into our notes 6 00:00:17,000 --> 00:00:22,000 that have location data and put a pin over them. 7 00:00:22,000 --> 00:00:24,000 Now, there are a lot of different ways we could do maps. 8 00:00:24,000 --> 00:00:28,000 We could use the normal Google maps API that you would see on maps.google.com 9 00:00:28,000 --> 00:00:31,000 to create a nice zoomable map. 10 00:00:31,000 --> 00:00:38,000 There are maps from other providers including Yahoo and Microsoft and others, 11 00:00:38,000 --> 00:00:42,000 but I think the best solution on a mobile device like this is to actually use the Google 12 00:00:42,000 --> 00:00:49,000 Static Maps API, and this doesn't actually create a JavaScript map. 13 00:00:49,000 --> 00:00:53,000 Instead, it creates an image based on a URL. 14 00:00:53,000 --> 00:00:58,000 So, all we need to do in our application is create the URL that will 15 00:00:58,000 --> 00:01:04,000 generate the correct map and pass it as an image source, and Google will create 16 00:01:04,000 --> 00:01:08,000 the map for us and return it as in image. 17 00:01:08,000 --> 00:01:12,000 Now, the goal of our map is to be completely offline. 18 00:01:12,000 --> 00:01:15,000 We don't want to use the server to store our data. 19 00:01:15,000 --> 00:01:17,000 However, for a map we really don't have any choice. 20 00:01:17,000 --> 00:01:20,000 There's no real offline way of doing this. 21 00:01:20,000 --> 00:01:26,000 So, if the device or browser is not connected to the internet, the maps won't work. 22 00:01:26,000 --> 00:01:29,000 But if they are, we'll be able to get map data. 23 00:01:29,000 --> 00:01:31,000 Now, if they're offline, they'll still be able to get to their notes and 24 00:01:31,000 --> 00:01:37,000 see information about it, and if the map is cached, then they'll actually be able to 25 00:01:37,000 --> 00:01:41,000 see the map, however, they won't be able to get any new maps. 26 00:01:41,000 --> 00:01:47,000 So, what we want to do is take a look at the static map developer's API here, 27 00:01:47,000 --> 00:01:52,000 and there's a quick example, and basically what we're going to do is create a URL 28 00:01:52,000 --> 00:01:58,000 to maps.Google.com/maps/api/staticmap. 29 00:01:58,000 --> 00:02:01,000 So, the parameters will define what kind of map we're going to create. 30 00:02:01,000 --> 00:02:06,000 In this example, they're using a few different pins, and it just creates this image 31 00:02:06,000 --> 00:02:09,000 based on the Brooklyn Bridge. 32 00:02:09,000 --> 00:02:13,000 So, if we look through the documentation, we can find what types of parameters 33 00:02:13,000 --> 00:02:17,000 we need to pass and how they need to be formatted. 34 00:02:17,000 --> 00:02:21,000 Now, down in this section here, there are different parameters. 35 00:02:21,000 --> 00:02:25,000 For one is the location parameters, one being the center, which is going to be 36 00:02:25,000 --> 00:02:30,000 where the map is centered, and we want it to be centered directly on our notes. 37 00:02:30,000 --> 00:02:33,000 So, we're going to use a latitude/longitude pair. 38 00:02:33,000 --> 00:02:38,000 Alternatively, we could use something like a description of a neighborhood 39 00:02:38,000 --> 00:02:42,000 or some other landmark or address, but since we have the latitude and longitude, 40 00:02:42,000 --> 00:02:44,000 that's what we'll do. 41 00:02:44,000 --> 00:02:47,000 The other parameter we need to do is zoom, and that tells the map how wide 42 00:02:47,000 --> 00:02:50,000 to create it from the center. 43 00:02:50,000 --> 00:02:53,000 We don't want it to be too close because we want to get some context, but we want 44 00:02:53,000 --> 00:02:59,000 it to be zoomed enough so we can get an idea of where the note was created. 45 00:02:59,000 --> 00:03:03,000 Then there are parameters about the actual image itself. 46 00:03:03,000 --> 00:03:06,000 So, it's size, which is required, and that's going to be how many pixels 47 00:03:06,000 --> 00:03:09,000 wide and tall the map is going to be. 48 00:03:09,000 --> 00:03:14,000 We can define a format if we like gif or jpeg or png. 49 00:03:14,000 --> 00:03:21,000 We can tell it what type of map if we want to have a normal road map or a satellite map, 50 00:03:21,000 --> 00:03:24,000 and there's things like language, which can tell us what type of language you want to use, 51 00:03:24,000 --> 00:03:28,000 but let's go ahead and use the default. 52 00:03:28,000 --> 00:03:31,000 Then what we need to worry about is actually placing the markers, and we're going to 53 00:03:31,000 --> 00:03:36,000 use that by doing the markers parameter, and this has a fairly interesting 54 00:03:36,000 --> 00:03:39,000 language we need to parse. 55 00:03:39,000 --> 00:03:44,000 Basically, each marker's attribute defines a marker, and its information 56 00:03:44,000 --> 00:03:50,000 based on its color and its label and its location is all crammed together 57 00:03:50,000 --> 00:03:56,000 as the value of the marker's attribute, and separated by the pipe character, 58 00:03:56,000 --> 00:04:01,000 or %7C as it's encoded in the URL. 59 00:04:01,000 --> 00:04:05,000 Now, the last parameter we need to look at is the sensor parameter, 60 00:04:05,000 --> 00:04:08,000 and that tells Google whether or not to use the location information 61 00:04:08,000 --> 00:04:11,000 it can derive to figure out the static map. 62 00:04:11,000 --> 00:04:15,000 We don't need to use the sensor because we have all the information we need, 63 00:04:15,000 --> 00:04:20,000 so we'll set that to false, however, it does say it is required. 64 00:04:20,000 --> 00:04:24,000 Let's take a little deeper look at the marker's attribute. 65 00:04:24,000 --> 00:04:31,000 In this example, we can see the center, zoom, and map type are all set, 66 00:04:31,000 --> 00:04:38,000 but the marker's attribute, the first one being color:blue, and then we see %7C, 67 00:04:38,000 --> 00:04:42,000 and that's the pipe character, but how we encode the pipe character in a URL. 68 00:04:42,000 --> 00:04:50,000 Then they do a label:S which means we're defining this S one right here, 69 00:04:50,000 --> 00:04:55,000 and then there's another %7C, and then there's a latitude and longitude pair 70 00:04:55,000 --> 00:04:58,000 separated by commas. 71 00:04:58,000 --> 00:05:03,000 So, the parameters of each marker are separated by colons, and each key value pair 72 00:05:03,000 --> 00:05:08,000 is separated by a pipe. 73 00:05:08,000 --> 00:05:11,000 So, we're going to have to go ahead and construct this string all by ourselves, 74 00:05:11,000 --> 00:05:17,000 and the best way for us to do this is to create a method on our note model 75 00:05:17,000 --> 00:05:21,000 that will actually generate the map string for us, then all we need to do in our 76 00:05:21,000 --> 00:05:26,000 template is create an image tag, call that map string method, and we should be able to 77 00:05:26,000 --> 00:05:31,000 see a map in our page.