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

  • Overview
  • Transcript

2.4 Map Events

Maps are much better when they can respond to events. In this lesson you’ll explore setting up different types of events on a map.

Related Links

2.4 Map Events

So, sometimes you're gonna wanna trigger off specific events when the user interacts with the map. And Google Maps has a way for you to attach listeners to certain objects such as a map. So the basic way to do this is Google Maps, is by tapping into the library. And we can call google.maps.events. And then from here we can call a function. And this function is called add listener. And the function takes what we're adding listener to, and this is going to be the gmap. The type of function, and we're gonna add a click function, and then what happens on that function. And we're going to pass through E as the event that gets fired off. Now there won't be event fired off for every type of event, but a click will return an event argument. So when the map gets clicked we'll alert click and then we'll also log the event. So we'll click right here and we can see the alert box that says click. And now we'll check the console. And we can see in the console that we have our event arguments. And it has a couple of properties on it as well. It has the lot long that was clicked, and it even has the pixel coordinate that was clicked. So if we wanted to add another type of event we can check out the Google Maps API, and we can see that there's all kinds of events. We can fire off events when the balance is changed, the center is changed, click, double click, drag, drag in, drag start. You can see that there is a lot that we can use. Let's fire off one for drag end. So when we finish dragging on the map, we'll fire off an event. So we'll copy this event right here and rather than pass through click, we'll pass through drag end and it won't return an event argument. And we'll just alert I have finished dragging. So now we'll click and we'll drag, and we see that we have, I have finished dragging. So you can see it's pretty easy to add events to the map. However, this is a pretty verbose way of doing this. You always have to pass through the map object, your name or your events and then the callback as well. And this google.maps.event.adlistener is pretty long. So we can abstract this into our mapster library. So below the zoom function on our prototype we'll create another function that'll handle these events. And we'll call it _on, and the reason why we're using an underscore is because we want this to be private within our library. And the underscore is just the convention for keeping it private, you can still use it outside of the library. But anyone who's using this will know that they wanna keep it inside of the library, just by using the underscore. So the parameters this will take through is the event and then the callback. So this is a google.maps.event.addListener function. And we can pass through our map. You can say this.gMap and then rather than click we'll say events. And then right here we can just pass through the callback. So now in our main script file we'll delete these events. So now we'll say map._on. We'll pass through click. And then we'll do our function, and then we'll alert click. So now we'll click on the map, and you can see that we get our alert box. So now let's see if we can log the events out to the console. So we'll click, we see click. Now let's check our log. And we see that we still get that object printed out to the console. Another thing to check out is the value of this. So inside of this callback, let's see what the value of this is. So we can see that we have our event arguments but then we have this big object down here. And this is the map object itself. And rather than having the map object, maybe we want our Mapster library. So how can we change the value of this? And we can do that with the call function. So within our maps or library, we have this callback right here. So rather than directly passing the callback, let's pass through a function. And within this function we can call the callback function. But rather than just calling it like a regular function, we're gonna call the call function on it. And the call function will actually execute this function. And the first parameter the calls function takes is what that this value will be, so currently the value is the map. We want it to be the Mapster library. So to assign that, we'll go to the top of the function and we'll create a variable called self and we'll assign it to this, because outside of the callback function, this is the library. But inside the callback function this is the map. So now I'll pass through self as the value of this, and then we'll pass through the event arguments as the first argument that will be returned. So now when we click we'll log out the event arguments and then we'll log out the value of this, which should be the Mapster library rather than just the map. So we click right here. We see click and then in our log we see that we have our venue arguments and then we also have our Mapster library which also contains the map. So now that we've abstracted this event listener out, we can add other events with that easily as well. We can add the drag end function on just as we did before, and now when we drag we get our done dragging alert box. And there's plenty of other functions as well such as we can alert when there's been a right-click. And we also can alert when the zoom level has changed. So, if you go through the Google Maps documentation, you can see all these types of events that you can fire off on the map. And now that we've abstracted these events into our own library, they're very easy to fire off. So now that we can fire off events on the map, we're probably gonna want to do other things as well. So in the next lesson we're gonna be focusing on adding map markers to the map.

Back to the top