FREELessons: 19Length: 1.7 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.1 Hello Map

So now that we have our account set up and everything, let's go about creating a real Google map in the browser. In this video series, I'm gonna be using Plunker. And this is just an in-browser code editor. So in my new Plunker project, we'll start setting up a Google map. You can see in Plunker that we have all our files here to the left. And then this is our editor here in the browser. And when we click over here, we can actually see a live preview of what we're coding in this pane to the left. So, to get going, the first thing we need to do is include the Google Maps script reference. And now that we have the script reference up, we can just reference the script js file that we have included in our plunker. So, open up script js. And the first thing we're gonna do is do a self-invoking, anonymous function. And for those of you who aren't familiar with self-invoking anonymous functions, this is just the way to control scope in your project. Everything you've done inside this anonymous function, will be contained inside of this scope. And another benefit of self-invoking anonymous functions, is that we can import other libraries. Into our anonymous function. So in this case, we can import the window, surpassing through the window as a parameter. We can make sure to pass it through a peer as well. And then we're also gonna pass through the Google name space. And this is of the equivalent of actually saying window.Google, because Google is now attached to the window, since we included the Google Map script reference. So you can say, or you can just say google. But, up here, you can just provide google, you can really provide anything you want, you can provide goog and that would work as well, because this is just the parameter. But, for consistency's sake we'll call it Google. So, now that we have this set up, we can start building up our map, and to build up our map we need two things, we need map options, and then the actual map itself. And the map option is just an object literal. We'll be going deeper into map options in a later lesson, but for now we just need to know a couple of things. So we have this object literal created, and we need to know the center, and then we also need to know the zoom. So the center option, will just simply set the center of where our map is loaded. So this will take in another object literal, and then this has two properties. A lat, and along. And this is the latitude and longitude that we'll be loading the center from. So this is the values that I choose to use. You can hard code whatever values you want to use. This will just load up the area for San Francisco. And then down here at the zoom level, this is the actual zoom of the map. We can provide 10 and this will be a little closer up to zoom level. And then below the map options we'll our create map. And this is where the google name space comes in the play. This is where we can say, new google.maps.Map. And this is the constructor. So we need the pass two parameters into this constructor. We need an elements, and then we also need the options that we declared above. Currently, we don't have an element. So, right here, we can create our element. And just using JavaScript, we can say document.getElementbyId and we'll get an element called map-canvas. We haven't created this map canvas on our HTML yet, but we will in just a second. So we've created map options. We've set the center and the zoom level. We've created an element that our map will load inside of. And then we also created the map, from the Google maps library, and that's hooking the elements and then the options as well. So if we go back to options.html, we can create our map. So right here we'll create a div and give that an Id of map canvas. And right now we're going seeing anything for our map, and that's because our map canvas doesn't actually have any size to it. So we need to set some styles for it. So we can open up sav.css and then within here we'll start setting styles. I want the map to take up 100% height and width on the page. So I'm gonna set the height of the html to 100% and then for the body I'll also set the height to 100%. And then I'll control any of the padding as well, so the padding and margin to 0. And then we'll set the cells for map canvas. And this is where we set the height to 100%. And you can see that our map loaded up. So this is really all it took to load up a full screen map. So one thing to take note of is the order that we're loading the scripts. We have our Google Maps script right here, and then our own script that loads this map. And we have this map canvas above it. If we were to put this in the head. It wouldn't load properly, and the reason why that is, is just simply the way a browser interprets HTML. It's gonna load these scripts right here, before it has any idea what this map canvasses, because a browser just goes line by line. So it's gonna hit this, and it has idea what map canvas is. So there's two ways to fix this, you either load the scripts the way we were doing it previously, or you can have a function that doesn't call this script file. Until the entire document's been loaded. This is something that people do all the time in jQuery. So instead of calling the function that let's us know that Dom has been loaded. We're just going to do this below our Dom elements. So setting up your Google map is a pretty easy process. You just need to be aware of a couple of the pit falls, and that's script loading like we just talked about and then also your styles. You need to make sure you're setting the size for the map element that you're initializing. And then in the JavaScript, all we have to do is set options, grab the elements, and then construct it with google.maps.Map. So, that's the easy way to go about creating Google maps. In the next lesson, we're going to go further into detail about the map options, and map options control some of the settings of the way the map is loaded onto the page.

Back to the top