2.2 The Google Maps Module
In this lesson, you’ll learn about the Google Maps module, which makes using Google Maps within your Angular application a cinch.Related Links
1.AngularUI Utilities7 lessons, 35:13
2.AngularUI Modules3 lessons, 22:13
3.Other AngularUI Components4 lessons, 26:14
4.Conclusion1 lesson, 00:58
2.2 The Google Maps Module
In this lesson, we're going to talk about AngularUI's map module. I've copied our template as a map folder here and we're inside this map folder. So the first thing to do is to do bower install angular-ui-map. Okay, that's installed. Notice that, of course, angular is a dependency for this, but also angular-ui-utils is a dependency, which our template already had, so it didn't have to install that. But you might be curious to know why angular-ui-utils is a dependency of ui-map, and rest assured, we'll talk about that in just a second. But let's begin by opening up our app.js file. Of course, the first step is to require our dependency, which is ui.map. Now, the second step, of course, is to get our script tag. So let's go over to index, and what we're gonna do is copy our ui-utils here, and we'll change this to ui-map and the file will be ui-map.min. Now because we're using Google Maps here we also need to request the Google Maps library. And right at the bottom here and I'm gonna go ahead and paste in another script tag. Now for this we're just using the Google CDN, this is the URL to the Google Maps library. Now there's something important that we need to notice about this script tag. Right at the end here we have a parameter which is callback and the callback name here is onGoogleReady. And this function onGoogleReady, or of course we could rename it whatever we want, will be called when this library has finished loading. And because we have to wait for this library to load we do not want to load our Angular application until after this has already loaded. Now by default, our Angular application will start running as soon as Angular's loaded and it looks for this ng-app directive. So what we need to do is remove this ng-app directive, and instead manually bootstrap our app from inside of a function called onGoogleReady. So let's go back to app.js and right at the top here, let's create a function called onGoogleReady. And now in here, what we need to do is angular.bootstrap. All we need to do is pass it the element that we want to bind the app to and the name of our application module. So what we need to do is start with document.getElementsByTagName('body') and we'll just get the first element there. Of course there is only one body. And then we actually pass these as an array and we're going to bind the MyApp module to the body. So as you can see our module here of course is called MyApp and this is basically, the same thing as what we previously had here with the ng-app on the body. It's just now, the app won't be started until the Google Maps library has loaded. Now, before we actually use our Google Maps directive here, let's create a few options for this map. So we'll say $scope.MapOptions and this is an object. Now there are many different map options that we can set and I'll have a link to the Google Maps API documentation underneath this video. But for now we're only going to use two options and these two are the only required options. So the first one is center. And this is the latitude and longitude of where the map will be centered. So what we do is a new google.maps.latlng, L-A-T L-N-G. And then I'm gonna paste in some coordinates here. And you can obviously choose whatever coordinates you want. These coordinates happen to be for the tallest building in the world, which is a tower in Dubai. Okay, so there's only one other required parameter, as I said. And that is the zoom level, and I'll just set that to 10. Okay, so now that we have some map options, let's go ahead and actually write our map directive. So, inside of our controller div here, I'm gonna create a new div. And then we use the ui-map directive, and we'll just call this MyMap. And then those options we set, we can do ui-options and we can set mapOptions. There we go. And remember that reference is this object that we just created right here. And there's one more directive I wanna use and that is ui.event. Now ui.event is the reason we need Angular UI utilities in this project, this is one of those utilities. Now we didn't discuss it earlier in the utilities lessons because it really just duplicates native angular behavior. It's just another way to add event handlers. But in this case, we want to add an event that Angular does not support by default, and that is the map-click event. So whenever we get a click on our map here, we wanna call the addMarker method. And we're gonna pass it $event and $params. And notice the syntax for ui-event, we pass it an object with each key being an event type, and the value being what to do when this event occurs. Now of course this could be any event in the browser including key down or regular-click or double-click or whatever. So if you like this over the native event handling, feel free go ahead and use it. All right. Now there's only one other thing we need to do here. And that is to actually see our map, we need to give it a height, which is why we gave it a class. And we'll just give it a height of 400 pixels. There we go. Okay, so now, we can focus our attention back on app.js but before we do that we should actually go ahead and see if this is working. If I open this up in the browser, you can see that it is indeed working, as you can see we're here in Dubai. Although at this zoom level we can't really see the building very well. Let's go ahead and bump this up to say, zoom 15. Now if I refresh the page, it will take a second, but you can see right here, it's the, and I'm probably going to mispronounce this, but it looks like the Burj Khalifa, something like that. Now notice this is just like Google Maps. I can go ahead and move it around, I can change the zoom level, satellite view instead. Let's see if Street View works. Looks like it does, I can go ahead and drop it right there. And here we are with Street View. Pretty impressive, eh? And there's the building right there. The other thing we wanted to do was add the ability to click on the map and drop a marker. Obviously, there's a lot more you could do with this. For example, you could store that marker data somewhere and do something more with it, but for now we're just gonna settle with creating a marker. So we have this addMarker method that we need to call. So let's go ahead and create $scope.addMarker and to create a marker on our map all we need to do is do a new google.maps.Marker, and we need to pass an object with two things. First of all, we need to pass it the map. You might recall we gave the map a name here when we said ui-map is MyMap. That's the name on the scope. So we can say $scope.MyMap, and the other thing we need to give it is the position that we want to put this in, and we can do params., and we'll say latLng, and that is the latitude and longitude of where we clicked on the map. Now notice we're just creating a new object here, we're not actually doing anything with it. You'd probably wanna push this into an array or save it to the server somehow. But this is fine, we can just go ahead and add it like this. So now if we come back, and I"ll refresh the page again, and I should be able to click and you can see we are dropping markers just fine. So that is a really basic look at using the Google Maps module. Obviously we haven't done very much with it in this lesson, but I hope you could see there is a lot of potential for building some really neat apps around Google Maps if you want to.