FREELessons: 19Length: 1.7 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.1 Map Widget

As the author of this library you may find it easy enough to use. However you can make it even easier for the common person to use it by extending it to a jQuery Widget.

Related Links

4.1 Map Widget

So far throughout this course, we've built up a map library. And as the authors of this map library, we've known how to use it pretty easily. But we can make it a bit easier for the common, every day user. So in this lesson, we're gonna take our map library and we're gonna build up a jQuery UI widget for our map. So if you go to You can check out the information on the Widget Factory. If we scroll down here and click View Source. We can look at this example widget. And those who you are familiar with writing jQuery plugins, writing a widget is very similar and actually in some ways, writing a widget is much easier. To begin a widget, you just start with $.widget, and then you type in your namespace, and then the name of the widget. You can set some default options, but then the important part is this create function right here. And you can see that they're using an underscore, which indicates that it's private. And within this create function, this is where you do all the setup for your widget. And then you can see this function right here called random. And it doesn't have an underscore, and that's because it's a public function. So we can use public and private functions, to set up our jQuery widget. So in the head tag we can see that we need jQuery and jQuery UI. So we'll copy these right here, and then within our plunker, we'll add these to the top of our script references. So we'll create a new file and we'll jQueryUI.mapster.js [BLANK_AUDIO] We'll wrap in into a self invoking anonymous function, and we'll pass through the window and Google. And inside of here we'll set up our widget. So i've pasted in the custom colorize widget from the jQuery UI website. And from here we'll go through and we'll set up our map using this as a boilerplate. So we'll setup our name space and you can really have your name space be anything, it doesn't really affect too much what we're going to be doing in this lesson. So i'm going to be calling the named space Mapster, but then i'm also going to call the widget named Mapster. So I'm going to get rid of all these options as well, because we don't have any defaults that we want to set, and then i'm going to remove the contents of all these functions. So now here we have our blank jQuery widget. The only methods that we're going to be concerned with, are the create method and any public methods such as this random method. And we'll change this random method to add marker. And rather than passing through an event, we'll pass an options to create the marker. So since we're using our mapster library, we're going to need to import that. So in our self invoking and autos function, we'll call mapster. And since mapster abstracts Google away from us, we can actually get rid of the Google namespace. So, before we initialize our map, let's make sure that we can call our widget. So inside the create function we're gonna console.log created. Then we're going to go to the index and we're going to add our widget. So, now in our main.js, we'll go through and remove all this content. And rather than importing mapster, we can actually import jQuery. So now, we'll select the map, and we'll call it .mapster. So now that we're calling mapster we'll check the console, and we can see that we created. So now that we know we've set up our widget correctly, let's go about setting up our map. So to create a map we need to know the element to display the map on, as well as the map options. And we can get the element by calling this.element. But except this element as the jQuery object. So to get the actual html element we just need to tap in to the array, and call the 0 index. And then to get the options, we'll just call this .options. So if I actually check out the value of this in the console, we'll see the properties on the widget. We can see on the console that we have our elements, and then we also have our options object as well. So now that we have the options and the element, we can create a map. And we could initialized it with the mapster library. And we can attached that onto the widget itself. So, we can set and we can sets a mapster.create and pass to the elements and the options. So, if we go to our main script file and we pass to through some options. And we can pass through the map options by calling Mapster.MAP_OPTIONS. And now you can see that the map appears. So, using a jQueryUI widget, we were able to initialize a map. And this is something that would be a bit easier for a common user to use. So, now if we go back into our jQueryUI.mapster, we can set the addMarker function. And we'll return and we'll pass through the options, and we'll go into our main script file, and we'll set this result to a variable called mapster. And we'll call the mapster widget again, but this time we'll call the addMarker function and we'll pass through our properties. And right now nothing is showing up, so we'll go to our widget. And we can see right here in our add marker function, that the options parameter is named wrong. So once we change that, we can see that the marker is added to the map. So now that we can add a marker, we'll set up being able to find a marker. So we can call the find by method and we'll pass through the call back. And we'll do something similar for move markers. So we'll go into our main script, and so now go and I'll add another marker. And since we have clustering enabled, we actually see the cluster show up. So if I go into Map options, I can take this cluster and I can set it to false. So set the first marker's id to 1, and the second marker's id to 2. And now we'll call mapster, and then we'll call the fine markers function within our widget. And then we'll pass through our callback that returns our marker. So now we'll log the matches to the console. And we can see that we're getting the map canvas div. So let's go back to our widget and see what's going on. And the problem is, is that we're not returning any of these markers. So now that we're returning the markers let's check our console. So now back in the console, we can see we're getting the marker that has an id of 1. So we're able to find markers, now check to see if we can remove markers. So just like above, we'll pass through the callback function, except this time, we'll check to see if the marker has an id of 2. And we can see that the second marker was removed from the page. So within our jQueryUI widget, we can provide all these public functions that we can tap into our mapster library with. We can even return all the markers as well. [BLANK_AUDIO] So if we tap into, we can get all of the markers back, and that's because the markers is just a list. So we have to call into items to get the actual markers back. So if we call into the Mapster widget to get the markers and we log that to the console, we should only see an array of one. And in the console, we get an array. And that's one item. And it has an id of 1. So, in this lesson, we were able to build up a map widget using our Mapster library. So now that we have this reusable widget built up, we can tap into things such as Google Map Services. So the next lesson, we'll add in these services, and we'll create some really cool functionality.

Back to the top