7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 19Length: 1.7 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.3 Map Utilities

So, we now know how to set up a map, and to customize it's options as well. And we even took some of that code, and we started creating our own library, to have that code reused, for multiple maps. So, in this lesson, we're gonna through, and we're gonna create the skeleton for our map library. So, here in Plunker, let's create a new file. And we'll call it mapster.js. And inside of here we'll create a self-invoking anonymous function, and we're gonna pass through window and Google, and then we're gonna create a variable called Mapster. And we're gonna set this variable to a self-invoking anonymous function. And inside of this self-invoking anonymous function, we're gonna create a constructor function, that's all called Mapster. And then down here, we're going to return Mapster. So, this may look a little confusing to you, but don't worry. If you're familiar with object oriented programming, this is similar to creating a class. This whole block of code here,is called a module. Within here, we can tack on all of our functions, and contain them all within this module. So this Mapster variable, isn't actually storing an object, it's restoring the results of the self-invoking anonymous function, which is this constructor function. So, this Mapster variable stores a function, not an object. So, outside of the module, we can tack on a function to the module, rather than tacking on to the constructor function. And we can call it mapster.create, and then we can return a new mapster. This is essentially a factory function, cuz it returns an instance of the object. So whenever we call mapster.create. We'll create a new object. So within Mapster, what we wanna do is, we wanna create a map. So we wanna pass in on elements, as well as options. And then we'll create a property, and we'll call it gMap, cuz that'll stand for the Google map. And we'll return a new google.maps.map, and we'll pass through an element and the options. And then below here, we also concept the prototype. So, any functions that we wanna tuck on to all instances, of all the objects, we'll put on to the prototype. Right now, just make sure we can create a Mapster object. So we'll make to pass through the element and the options down here, as well. And down at the bottom we need to say, window.Mapster equal Mapster. So now Mapster is attached to the window. So an index.html or source our script file. And now in our main script file, rather than saying newgoogle.maps.map. We can say mapster.create. [BLANK_AUDIO] And you can see that we get the same results, so if we wanted to create multiple maps, we can do it all in this mapster.create. And then right now this is really the same thing as creating a new Google map with the Google maps library, but within our Mapster library, this is where we're gonna be able to tack on more functions, to encapsulate the functionality that we commonly use. So, one thing that people commonly do, is that they get and set the zoom level. If we go into the Google Maps API, we can see that we have a getZoom function, and down at the bottom we have a setZoom function. So, in our map options, we'll move our min and max zoom limits, and within our main script file, we can say map.gMap, because that's our map property. And we can call setZoom, and we'll set it to 18. And you can see that we have a deep zoom. And then we can do an alert, and we also can call map.gMap, and we can call getZoom. And now you can see we have an alert box for 18. And some consider it bad practice to tap into an object, to then call it's method. So we'll get rid of this, and we'll go into Mapster, and we can create a function, and we can call it zoom. And zoom will take in a level. And we can check to see, if the level exists, we'll set the zoom. However, if the zoom does not exist, then we'll return the zoom. So now we'll go back to our script, and within here, we can call map.zoom, and we can set it to 18. And we can see that we're zoomed in at 18. And now we can say alert. And we call map.zoom, but we're just gonna call the function. And we can see that returns 18. So this essentially acts as a getter and a setter, for the zoom property. So if you look into the Google Maps API, you can see that there's a lot of functions,on the map class. So you can create a function within the library, that calls into all of these. Or you can call into the map function to call these. Now, it can get annoying calling into .gMap all the time, so I only create those functions within the Mapster object, that I use most often. So if you're finding yourself calling the getZoom and the setZoom more often, I'd recommend creating a method for it within the library. So in this lesson, we went through and we created the scaffolding for our Mapster library. If we go into script.js we can actually remove the Google dependency, from our self-invoking anonymous function. And we can see that everything still works, just as it did before. And this is because all of the Google functionality, is within our Mapster library. If we wanted to switch to another mapping API, we could do that, within our Mapster library, and our main script file wouldn't notice the difference. Because here is where we're doing all of the heavy work inside of this library. So in the next lesson, we'll learn how to trigger events from the map, and we'll also abstract that into our mapping library as well.

Back to the top