Start a free Courses trial
to watch this video
In this video we see how to instantiate and configure the Google Map we are adding to our page. We use the information from the HTML5 Geolocation call to center the map on our location.
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[? Music ?] 0:00 [Think Vitamin Membership] [membership.thinkvitamin.com] 0:03 [HTML5: Geolocation] [Google Maps: The Map] 0:08 Jim Hoskins: In the previous video, we made the preparations for adding 0:13 a Google map to our page. 0:15 Now, we'll actually instantiate the map and make it so that it 0:17 centers on our current location. 0:19 So, now we have the div that will hold our map defined on the page, 0:21 and we can see exactly where it's going to be and how large it's going to be. 0:24 The next thing we need to do is actually write the JavaScript that will create the map 0:28 and place it onto our page. 0:31 Now, if we look at our code, we have this showMap function, 0:33 which is the success handler of actually querying our geolocation data. 0:36 So, right now, for my purposes, I only want to show the map 0:42 if we do have the geolocation data. 0:44 So, let's build up the map inside of our showMap function. 0:47 All this code right here is for showing the lat and long of the current location. 0:51 So, above here we'll do our map generation. 0:59 I'm going to create our map, and we'll store this in a variable called "map." 1:02 And the way we create a new map is to instantiate a new Google map class. 1:07 So, in order to do that, we use a new keyword, and the map class is called 1:11 "google.maps.Map." 1:15 So, let's take a look at what this Google maps class is. 1:20 We can go to the documentation and open up the API reference, 1:23 and this will have all the details we need to know in order to create our Google map. 1:27 So, the map class we can click on right here, and we can see it's the 1:32 google.maps.mapclass. 1:35 So, that's how I found out where we create our map. 1:38 So, the constructor, which we're using right now, takes in two options. 1:41 One is the map div, or the div we created that the map will occupy, 1:45 and the second is options. 1:49 So, let's fill in our first argument. 1:52 Let's call this map "Div" and let's call the second "options." 1:54 So, before we can do this, we need to create our map div and our options. 2:00 So, above where we instantiate our map, let's go ahead and create the map div. 2:04 So, we'll create a variable called "map div," and this is simply the div 2:09 that we want to place our map into. 2:12 We can do "document.getElementByID" and pass in map, 2:15 and this is our map div. 2:22 And let's just see where this gets us. 2:24 And if we go back to our page and refresh, we can see that Google maps is loading in. 2:27 It's changed the color of it, but it's not quite ready to go because we haven't 2:33 specified where the map should be. 2:36 So, let's continue on and create our options. 2:39 So, our options, what are those going to be? 2:42 And we can see the options are specified as map options, and we can click on that 2:46 and see that it's an object with specific properties. 2:52 We can specify any of these properties like the background color, the map type, 2:57 zoom and so on, but a few of these are required. 3:01 You'll notice that center is required. 3:06 The map type ID is required. 3:11 And the zoom is required. 3:18 So, at the minimum, our option object needs to contain zoom, map type ID and position. 3:22 Let's go ahead and create an object with those three keys. 3:28 So, we called our options "options," so let's specify them before we use them. 3:33 And we're just going to create a JavaScript object. 3:39 So, we need to define the zoom. 3:41 We need to define the center. 3:44 And we need to define the map type ID. 3:46 The zoom is a number with zero being the entire view of the Earth being visible, 3:52 and as you go higher, the more zoomed in the map will be. 3:59 You can find some examples of this on the website, but sometimes it's just easier 4:02 to plug in different zoom values and see if they match up to what you expect the map to be. 4:05 So, I'll just put in the value 10 here. 4:12 Now we need to define the center, and this is a special latitude and longitude object, 4:15 and we can see that by looking in the documentation here under the center. 4:19 It's a type lat/long. 4:26 So, what we need to do is create a lat/long object, and all we need to do to do that 4:28 is construct it by passing in a latitude and a longitude. 4:33 And we do have the latitude and longitude of the user because we are 4:37 inside of our showMap function which has their geolocation positioning information. 4:40 I'm going to say this lat/long object is going to be called "currentPosition," 4:46 and we'll see how we define that in a moment. 4:54 The last thing we need to do is define the map type ID. 4:57 What this does is defines what type of map, whether it's a street map or 5:01 an aerial view satellite map, and we can see the types of maps 5:06 by clicking this map type ID right here. 5:11 So, these are different constants defined under the google.maps.maptypeidclass. 5:15 So, we can do a hybrid, road map, satellite or terrain. 5:21 Road map is the sort of default map that you are used to seeing on Google maps. 5:25 Let's use that. 5:29 So, all we need to do is get this value google.maps.maptypeid.roadmap. 5:31 So, we'll set the value here to google.maps.MapTypeId.ROADMAP. 5:37 Now we have our options defined, and the one thing we need to define next 5:48 is our current position. 5:51 So, let's define that before we use it, currentPosition, 5:54 and to create a new lat/long object, we saw before, 6:00 we're going to create a google.maps.latlongobject 6:07 and pass it the latitude and longitude to the constructor. 6:11 So, we'll do a new google.maps.latlongobject, 6:15 and we'll pass in our latitude and longitude. 6:23 We saw how to get those down here, so what I'll do is I'll copy this code to the top 6:28 so we can just have our short variables of latitude and longitude. 6:32 So, I'll pass in lat and long. 6:37 Depending on how you want to shorten them we could change this to lng, 6:42 but I'm used to using lon, so the abbreviations are a little bit different, 6:45 but we can fix that very easily. 6:48 So now, let's look at what we're doing. 6:51 We're creating a current position, which is a lat/long object, which is defined 6:53 by our current location. 6:56 We're creating an options here which defines a zoom. 6:58 It centers on that current position, and it defines the map of type road map. 7:01 Then we grab our map object by using document.getElementById, 7:08 and then we can create a new map by passing in the div that we want to place it in, 7:12 and the options we've defined. 7:17 So, assuming that there are no typographical errors, we should see a map 7:19 when we go ahead and refresh the page, and the map should be 7:22 centered on our current location. 7:26 Now, if we open this up, we can see we do have a syntax error. 7:28 I forgot a comma here. 7:31 So, if we go ahead and refresh it, we can see now our map shows up, 7:34 and it's centered on Orlando. 7:37 Now, it's a little bit too far out for me, so let's go ahead 7:40 and experiment with different zoom levels. 7:43 Let's put this up to something like 18. 7:46 If we refresh, you can see that it's being very specific now. 7:50 This is actually zooming right into our building. 7:54 So, it's a little actually too specific. 7:58 I think it lacks a lot of the context as to where we are in relation to downtown. 8:00 So, let's go ahead and scale this back maybe to something like 14. 8:04 And if we refresh, that's good. 8:10 It gives us a good view of downtown Orlando. 8:13 Let's just maybe bring it in a couple more. 8:16 All right. I think that's how I want to do it. 8:21 So, that's one way to determine what the correct zoom level is, 8:23 for you to just try it out and see if it's too broad or too specific 8:25 based on sort of your expectations of what you want your map to be. 8:30 So, now we've created a Google map that centers on our current location. 8:33 In the next video, we'll add a pin to that location and an info window to display some text. 8:37 [Think Vitamin Membership] [membership.thinkvitamin.com] 8:42
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