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

3.2 Marker Events

So previously we were adding map markers to the map, but we were having some difficulty with customizing them through them parameters. Every time we wanted to customize a property in our method we had to add another parameter and this made things quite long. And then also adding any events would be very complicated this way as well. So on this lesson we're going to go through and we're going to fix this method. And we're also going to be able to add events to our markers. So, these are the two methods that we had to add multiple parameters to, just to customize our marker. And in our main script file, this is where we're passing through our values. And also, it's not very clear what these values are. Is this the longitude? Is this the latitude? And what does this true mean? So, rather than pass it through like this, we can create one parameter and that'll be the options. And this will be just a little different than the default map options. Because rather than the map options that Google expects, we can pass through the map options that we expect. So, we can pass through the lat, the long, whether we want it draggable. And we can even provide the icon. So, now we'll go into our mapster library, and then we'll get rid of all these parameters. And we'll just call it opts for options. And then right here, we'll modify the options. We'll set the value for the position and then we'll pass through the options in the create marker function. And the only thing we need to do inside the create marker function is set it to the map. And now you can see that we have our customized marker. So every time we want to change something on the marker we don't have to add another parameter. We just need to add something onto the options object literal. So in this object literal we can add another property. We can set its visibility and we can set it to false. And then it disappears from the map. But when we turn it back to true, it reappears. And another thing we can do, too, is we can add our own custom options on to this. So, if we wanted to give it an ID, and in this case we'll give it an ID of one. So, if we go into Mapster, and if we consoled out log, the create marker function. We can see in the log that we have an ID of one. So even though the ID property isn't something supported by the Google Maps library, we can still add it for our own custom use. So now that we're adding through our own custom options, we can also pass through events. So the way you add events onto a marker is just the same way that you would add on to a map. Up here we're calling google.maps.events.addListener, and we're adding it onto the map. And the way we do it for a marker is just by adding it onto the marker. So we actually can refactor this function to use any type of supported object, rather than just the map. And we can do that by getting rid of these parameters and just pass through options as we did below. So for the listener we'll set options.object, then we'll set options.events. And then as well as options.callback. So now when we're adding a marker we can check to see if there's an event. And if there's an event then we're gonna want to fire it off. And we can do this by calling the this._on function. And since this now takes in an object we'll pass through this object literal. And we can pass through the object that expects to act on. And in this case it'll be the marker. But right now we don't have the marker. And that's because we're creating the marker down at the bottom. So let's move that below the options. And then let's return the marker. And because of JavaScript's hoisting let's create a marker at the top of the addMarker function. And for those of you who aren't familiar with hoisting within JavaScript. It's a feature that adds all the variables to the top of the scope. So, even if you declare this var marker down at the bottom, it always gets added up here when it gets interpreted by the browser. This can be very confusing during certain parts of your code. So, always try to declare your variables at the top of the scope. Even if they haven't been defined yet as in this case. So we're setting the marker variable at the top. And then we'll initialize it down here to the create marker function. So our object will be the marker and then we just need the event. And in this case, we'll go to the options and we'll call the events.name. And then we'll also set the call back property. So, now in our main script file we'll create an event object. And the event will have a name and in this case it'll be the click events. And then we'll also set a call back. And the call back will alert, I'm clicked. So now we'll click on this marker, and we can see that we get I'm clicked. We can even change this, and we can change it to drag end. And we'll change the alert to I'm done dragging. And now when we drag it down. We get the alert box after it's finished dragging. So, by providing options, we allow our markers to be customized just through an object literal. Rather than writing all this code surrounding the marker. So, everything that this marker needs to do is contained inside of this object literal. So, now we know how to fire off events on markers. We might wanna know how to open up an info window. So when we click on this marker we'll see a little window that pops up that gives us more details about the marker we clicked on. So in the next lesson we'll focus on info windows

Back to the top